如何在我的页面上添加按钮（在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>