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

debugcn 发表于 Dev

约翰·杜

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

任何建议，将不胜感激。

我最初的标记是（与图片匹配）：

<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>

但是，它将按钮放置在窗体的顶部。

在添加按钮之前，页面如下所示：

佩特拉

您是否尝试过通过添加它们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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。