twitter-bootstrap - Bootstrap : how to make dropdown button look like other text and aligned with other text

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>

我需要确保下拉按钮文本“Item 2”在字体大小、字体系列、垂直对齐和背景颜色方面与其他文本一样。这是我到目前为止所做的(jsfiddle 演示: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;
}

我可以看到按钮文本“Item 2”未与“Item 1”或“Item 3”垂直对齐。我怎样才能解决这个问题？另外，请随时告诉我上述 .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