如何向我的页面添加按钮（在HTML上布置按钮）

Question

我想在邮政编码的右侧添加一个按钮，而不会影响字段的大小。

任何建议都将不胜感激。

我原来的标记是（这是图片匹配）：

<div class="col-md-6 col-md-offset-3 text-center" style="border:solid">
   // All my fields...
</div>

然后我尝试了：

<div class="col-md-3"></div>
<div class="col-md-6">
   // All my fields using form-group
</div>
            <div class="col-md-3">
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group"></div>
            <div class="form-group">
                @(Html.Kendo().Button()
                        .Name("btnLookup")
                        .Content("Lookup")
                )
            </div>
        </div>

但是它将按钮放在表单的顶部。

在我添加按钮之前，页面看起来像是：

Answer 1

您是否尝试通过display: absolute添加它们？

.form-group {
  position: relative;
}
.lookup {
  position: absolute;
  top: 0;
  right: -50px;
  width: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Name">
      </div>
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Email">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Postal">
        <button class="btn btn-primary lookup"><i class="glyphicon glyphicon-search"></i>
</button>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="City">
      </div>
    </div>
  </div>
</div>