如何使用css引导将按钮放置在彼此相邻的位置

我需要将一些按钮放在同一行中，彼此相邻。另外，我喜欢将带有按钮的文本输入放在同一行上

这就是我所做的

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

下面是一些屏幕截图，显示它们是如何不对齐的

已更新 这就是页面在页面中的外观，强制IE8可比性视图

---

包含在

中的所有子元素。inlinebox

包装器具有不同的线高度（一些使用相对单位指定，另一些使用绝对像素值设置），默认情况下设置为

垂直对齐：中间

。作为一种快速修复方法，请在

上指定
行高
和
垂直对齐
属性。inlinebox

类：

.i3解决方法表{
宽度：100%；
填充：0；
保证金：0；
}
.I3解决方法表右{
最小宽度：180px；
}
.inlinebox{
显示：内联块；
*显示：内联；
线高：1；
垂直对齐：顶部；
}

请求中断
拨号
转接电话

包含在

中的所有子元素。inlinebox

包装器具有不同的线条高度（一些使用相对单位指定，另一些使用绝对像素值设置），默认情况下设置为

垂直对齐：中间

。作为一种快速修复方法，请在

上指定
行高
和
垂直对齐
属性。inlinebox

类：

.i3解决方法表{
宽度：100%；
填充：0；
保证金：0；
}
.I3解决方法表右{
最小宽度：180px；
}
.inlinebox{
显示：内联块；
*显示：内联；
线高：1；
垂直对齐：顶部；
}

请求中断
拨号
转接电话

谢谢您的帮助。此网站的问题在于它在查看器中运行。查看器强制页面在IE8可比性视图中被替换，我没有办法改变这一点。当我渲染页面时，由于某种原因，网格看起来是错误的。您的代码在现代浏览器中修复了该问题，但在IE8可比性模式中该问题仍然存在。我用屏幕截图更新了我的问题，显示了它在查看器中的外观。我怎样才能纠正这个问题？另外，我不能使用这个

，否则查看器将无法工作。有了这些额外的信息和你的IE8屏幕截图，似乎要解决的问题不止一个，对于这个项目来说，使用引导可能不是一个好的选择？我将首先在IE8查看器中正确格式化

.input组

，然后作为第二步担心额外内联按钮的对齐。这些可能会有帮助：，如果您在IE8兼容模式下访问，它们是否正常工作？感谢您的帮助。此网站的问题在于它在查看器中运行。查看器强制页面在IE8可比性视图中被替换，我没有办法改变这一点。当我渲染页面时，由于某种原因，网格看起来是错误的。您的代码在现代浏览器中修复了该问题，但在IE8可比性模式中该问题仍然存在。我用屏幕截图更新了我的问题，显示了它在查看器中的外观。我怎样才能纠正这个问题？另外，我不能使用这个

，否则查看器将无法工作。有了这些额外的信息和你的IE8屏幕截图，似乎要解决的问题不止一个，对于这个项目来说，使用引导可能不是一个好的选择？我将首先在IE8查看器中正确格式化

.input组

，然后作为第二步担心额外内联按钮的对齐。这些可能会有帮助：，如果您在IE8兼容模式下访问，它们是否正常工作？

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

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

.I3WorkAroundTableRight
{
  min-width: 180px;
}

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