body { background-color: #816868; /* 设置背景颜色 */ } form { max-width: 50px; /* 设置表单最大宽度 */ margin: 5px auto; /* 居中显示表单 */ padding: 1px; /* 添加内边距 */ background-color: white; /* 设置表单背景颜色 */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ } .section__title { font-weight: bold; /* 设置标题字体加粗 */ margin-bottom: 0px; /* 设置标题与输入框的间距 */ } input { width: 70%; /* 设置输入框宽度为100% */ padding: 2px; /* 设置输入框内边距 */ margin-bottom: 1px; /* 设置输入框之间的间距 */ border-radius: 4px; /* 添加边框圆角 */ border: 1px solid #ccc; /* 添加边框样式 */ } button { padding: 5px 5px; /* 设置按钮内边距 */ background-color: #007bff; /* 设置按钮背景颜色 */ color: white; /* 设置按钮文字颜色 */ border: none; /* 移除按钮边框 */ border-radius: 4px; /* 添加按钮圆角 */ } button[type="reset"] { background-color: #dc3545; /* 设置重置按钮背景颜色 */ }让.section__title 和input 在同一行

要让 `.section__title` 和 `input` 在同一行，您可以使用 flex 布局。您需要对每一行的容器元素应用 `display: flex;`，并使用适当的布局属性来控制它们的排列方式。

以下是修改后的样式代码，以便让 `.section__title` 和 `input` 在同一行：

form {
  /* 其他样式保持不变 */

  display: flex;
  align-items: center; /* 垂直居中 */
}

.section__title {
  /* 其他样式保持不变 */

  flex: 1; /* 占据剩余空间 */
}

input {
  /* 其他样式保持不变 */

  flex: 2; /* 占据两倍宽度 */
}

通过将容器元素 `form` 的 `display` 属性设置为 `flex`，然后将 `.section__title` 的 `flex` 属性设置为 `1`，将 `input` 的 `flex` 属性设置为 `2`，您可以实现 `.section__title` 和 `input` 在同一行，并且它们的宽度比例为 1:2。