在表单输入旁边有按钮 - CSS

有时候我们需要在表单输入框的旁边添加一个按钮，以便用户点击进行操作，比如搜索、添加等等。

这里介绍两种方法：

方法一：通过浮动实现

<div class="input-group">
  <input type="text" class="form-control" placeholder="请输入搜索关键字...">
  <div class="input-group-addon">
    <button type="button" class="btn btn-default">搜索</button>
  </div>
</div>

.input-group-addon {
  float: left;
  position: relative;
  z-index: 2;
  margin-right: -1px;
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.input-group-addon button {
  border-left: none;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

在上述代码中，我们使用了 Bootstrap 的输入框组（input-group），并在其内部加入了一个带有按钮的输入框插件（input-group-addon）。我们通过 CSS 的浮动（float）属性将按钮向左浮动，实现了按钮与输入框并排显示的效果。

方法二：通过定位实现

<div class="form-group">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="请输入搜索关键字...">
    <button type="button" class="btn btn-default">搜索</button>
  </div>
</div>

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}

.input-group button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}

.input-group .form-control {
  float: left;
  width: auto;
  margin-bottom: 0;
}

在上述代码中，我们将输入框和按钮包裹在一个含有相对定位（position: relative）的 div 元素中，然后使用绝对定位（position: absolute）将按钮定位在 div 元素的右上角。我们还通过 display 属性将 input 和 button 元素以 table 和 table-cell 的方式排列。

你可以根据自己的需求和风格选择其中一种方法实现输入框和按钮的布局。