如何使用css將按鈕放在彼此的旁邊Bootstrap

Question

我需要在同一行中放置一些按鈕。另外，我喜歡在同一行放置一個帶有按鈕的文本輸入。

這裏是我做了什麼

<div class="well"> 

     <table class="I3WorkAroundTable"> 
      <tr> 
       <td> 
        <div class="inlinebox"> 

         <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestBreak">Request Break</button> 

         <button type="button" class="btn btn-primary scripter_header_button" id="MasterReturnToCampaign">Return to Campaign</button> 

         <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestLogoff">Logout off Campaign</button> 

         <button type="button" class="btn btn-primary scripter_header_button previewCallOption" id="MasterSkip">Skip this Call</button> 

         <button type="button" class="btn btn-primary scripter_header_button previewCallOption" id="MasterPlace">Place this Call</button> 

        </div> 

       </td> 
       <td class="I3WorkAroundTableRight"> 

        <div class="inlinebox"> 

         <div class="input-group"> 
          <input type="text" class="form-control" id="MasterAlternativePhoneNumber" style="width: 120px;"> 
          <span class="input-group-btn"> 
           <button class="btn btn-primary" type="button">Dial</button> 
          </span> 
         </div> 

        </div> 

        <div class="inlinebox"> 

         <button type="button" class="btn btn-primary scripter_header_button" id="MasterTransferCall">Transfer Call</button> 

         <button type="button" class="btn btn-primary scripter_header_button " id="MasterAnsweringMachine">Answering Machine</button> 

         <button type="button" class="btn btn-primary scripter_header_button " id="MasterWrongNumber">Wrong Number</button> 

        </div> 
       </td> 
      </tr> 
     </table> 

    </div> 

但是，如果我下面的代碼添加它，轉移過去的3個按鈕的其他按鈕的垂直中心。

 <div class="inlinebox"> 

      <div class="input-group"> 
       <input type="text" class="form-control" id="MasterAlternativePhoneNumber" style="width: 120px;"> 
       <span class="input-group-btn"> 
        <button class="btn btn-primary" type="button">Dial</button> 
       </span> 
      </div> 

     </div> 

這裏是我的CSS代碼

.I3WorkAroundTable 
{ 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

.I3WorkAroundTableRight 
{ 
    min-width: 180px; 
} 

.inlinebox 
{ 
    display: inline-block; 
    *display: inline; 
} 

這裏有一些截圖，以顯示他們是如何不對齊

更新 這是頁面的外觀，這迫使IE8的可比性視圖

Answer 1

包含您.inlinebox包裝有不同行的高度內的所有子元素的網頁內（一些與相關單位和其他設置指定絕對像素值），默認設置爲vertical-align: middle。作爲一個快速修復指定的.inlinebox類line-height和vertical-align屬性：

.I3WorkAroundTable { 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.I3WorkAroundTableRight { 
 
    min-width: 180px; 
 
} 
 
.inlinebox { 
 
    display: inline-block; 
 
    *display: inline; 
 
    line-height: 1; 
 
    vertical-align: top; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="well"> 
 
    <table class="I3WorkAroundTable"> 
 
    <tr> 
 
     <td> 
 
     <div class="inlinebox"> 
 
      <button type="button" class="btn btn-primary scripter_header_button" id="MasterRequestBreak">Request Break</button> 
 
     </div> 
 
     </td> 
 
     <td class="I3WorkAroundTableRight"> 
 
     <div class="inlinebox"> 
 
      
 
      <div class="input-group" style="width: 160px"> 
 
      <input type="text" class="form-control" id="MasterAlternativePhoneNumber" > 
 
      <span class="input-group-btn"> 
 
       <button class="btn btn-primary" type="button">Dial</button> 
 
      </span> 
 
      </div> 
 
      </div> 
 
     
 
     <div class="inlinebox"> 
 
      <button type="button" class="btn btn-primary scripter_header_button" id="MasterTransferCall">Transfer Call</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

我也動了你的<input>元素的固定寬度的.input-group。

對於跨瀏覽器更好的一致性，由於您使用的引導已經，您可以考慮使用Bootstrap grid基於列的佈局，而不是使用<table>，或display: inline-block水平使用塊級元素與float:left，而不是試圖對準一切。