如何使用 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，您可以考虑将 Bootstrap grid 用于基于列的布局而不是使用 <table>，或者使用带有 float:left 的块级元素而不是尝试将所有内容与display: inline-block 水平对齐。