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。作为快速修复，请指定line-height类上的vertical-align和.inlinebox属性：

＆＃13;

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

＆＃13;

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

＆＃13;

我还将<input>元素的固定宽度移至.input-group。

为了在浏览器之间实现更好的一致性，并且由于您已经使用了Bootstrap，您可以考虑使用Bootstrap grid代替基于列的布局而不是<table>，或者使用块级元素{ {1}}而不是尝试将所有内容与float:left水平对齐。

如何使用css Bootstrap将按钮放在一起

1 个答案: