引導：如何讓下拉按鈕，看起來像其他文本，並與其他文字

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> 

我需要確保下拉按鈕文本「項目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; 
} 

我可以看到按鈕上的文字「項目2」不是垂直「項目1」或「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