Question

我有以下HTML，它是一行菜单项列表：

<ul>
    <li>Item 1</li>
    <li>
        <div class="btn-group">
          <a type="button" class="btn btn-default" data-toggle="dropdown">Item 2</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
          </ul>
        </div>
    </li>
    <li>
        Item 3
    </li>
<ul>

我需要确保下拉按钮文字＆＃34;项目2＆＃34;看起来就像字体大小，字体系列，垂直对齐和背景颜色等其他文本一样。这是我到目前为止所做的（jsfiddle demo：http://jsfiddle.net/mddc/23ab8d9u/4/）

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: pink;
}

ul li {
    display: inline-block; /*this cannot be changed in my project*/
}

.btn-group .btn {
    padding:0;
    margin:0;
    border-width: 0;
    font-size: initial  !important;
    text-shadow: none !important;
    background-color:inherit !important;
    font-size: inherit !important;
    line-height: initial !important;
}

我可以看到按钮文字＆＃34;项目2＆＃34;不与＆＃34;项目1和＃34;垂直对齐;或＆＃34;项目3＆＃34;。我怎样才能解决这个问题？此外，请随时告诉我上述.btn定制是否足够或正确。

谢谢和问候。

Answer 1

你非常接近，但最后一部分不是.btn元素，而是包含元素，所以只需将它添加到你的CSS中：

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
}

text-bottom属性会将所有<LI>元素与其底部对齐，从而为您提供完美的对齐。

请参阅forked fiddle here

Bootstrap：如何使下拉按钮看起来像其他文本并与其他文本对齐

1 个答案: