CSS 将提交按钮放在与输入框同一行

在本文中，我们将介绍如何使用CSS将提交按钮（input submit）放在与输入框（input box）同一行的方法。

阅读更多：CSS 教程

方法一：使用浮动（float）

我们可以使用CSS的float属性来将元素浮动到左侧或右侧，实现按钮和输入框在同一行显示。首先，我们需要给输入框和提交按钮分别添加一个class或id，以便于对它们进行样式定义和选择器操作。

HTML代码如下：

<div>
  <input class="input-box" type="text">
  <input class="submit-btn" type="submit" value="提交">
</div>

然后，我们可以使用CSS来定义输入框和提交按钮的样式，并利用浮动属性将它们放在同一行。

CSS代码如下：

.input-box {
  float: left;
  width: 70%; /* 设置输入框宽度 */
}

.submit-btn {
  float: left;
  width: 30%; /* 设置提交按钮宽度 */
}

上述代码中，我们将输入框的宽度设置为70%，提交按钮的宽度设置为30%。这样就能够确保它们在同一行显示，且分配了适当的宽度比例。

方法二：使用Flexbox布局

除了使用浮动属性，我们也可以使用CSS的Flexbox布局来实现按钮和输入框在同一行显示。

HTML代码仍然是上述示例代码：

<div>
  <input class="input-box" type="text">
  <input class="submit-btn" type="submit" value="提交">
</div>

我们需要给包裹输入框和提交按钮的div元素设置为Flex容器，并为该容器指定Flexbox布局属性。

CSS代码如下：

div {
  display: flex;
}

.input-box {
  flex-grow: 1;
}

上述代码中，我们通过display: flex将div元素设置为Flex容器，然后通过flex-grow: 1将输入框扩展至剩余空间的全部宽度，使得提交按钮和输入框在同一行并平均分配宽度。

方法三：使用网格布局（Grid Layout）

另一种将提交按钮放在与输入框同一行的方法是使用CSS的Grid布局。与Flexbox布局相比，网格布局更适合于复杂的布局要求，但对于简单的需求来说可能会显得过于复杂。

HTML代码仍然是上述示例代码：

<div class="container">
  <input class="input-box" type="text">
  <input class="submit-btn" type="submit" value="提交">
</div>

CSS代码如下：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 设置两栏布局，比例为1:1 */
  grid-gap: 10px; /* 设置栏间距 */
}

上述代码中，我们通过将容器设置为display: grid，然后使用grid-template-columns属性将容器分为两栏，每栏的宽度比例为1:1（如果希望不同的比例，可以调整数值）。通过grid-gap属性可以设置栏之间的间距。

总结

通过以上三种方法，我们可以实现将提交按钮放在与输入框同一行的效果。使用浮动属性可以简单实现，但 Flexbox 和 Grid Layout 更适用于复杂布局的情况。根据具体需求选择合适的方法即可实现相应的效果。

记住，CSS布局是一个灵活多样的领域，不同的方式都可以达到相同的效果。根据实际需求和项目的整体架构选择最适合的方法。