Question

我有一个问题，我需要水平对齐多个dropdowns。我尝试过使用纯表标签，它可以工作，但我怀疑这是不好的做法。这是一个工作小提琴http://jsfiddle.net/1440c8a6/5/

以下是HTML代码：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">

            <div class="pull-left">

                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>

                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>

                </div>
            </div>

            <div class="pull-right">
                <a class="btn btn-warning btn-sm" href="#" role="button">button1</a>
                <a class="btn btn-success btn-sm" href="#" role="button">button2</a>
            </div>

            <br />
            <br />
        </div>
    </div>
</div>

正如您所看到的，我正在尝试将左侧部分的下拉列表与右侧部分中的按钮对齐：

我尝试过这种结构，但不确定这是好还是坏：

<table>
  <tr>
    <td>first div here</td>
    <td>second div here</td>
  <tr>
</table>

Answer 1

将display:inline-block设为.dropdown

<强> CSS

.dropdown{
    display: inline-block;   
}

<强> DEMO HERE

水平对齐2个下拉菜单

1 个答案: