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