垂直對齊的HTML列表文本

在this page有與此結構組成的HTML列表的右側邊欄中的菜單：垂直對齊的HTML列表文本

<ul class="nav nav-pills nav-stacked"> 
    <li class="active"> 
     <a href="index.html"><i class="icon-home"></i> Home</a> 
    </li> 
    <li> 
     <a href="development.html">Development</a> 
    </li> 
    <li> 
     <a href="management.html">Management</a> 
    </li> 
    <li> 
     <a href="learning.html">Learning</a> 
    </li> 

    <!-- more menu entries --> 
</ul>

注意，一些菜單項具有（字體）圖標的左邊標籤，而其他人則沒有。這使菜單看起來很不雅觀，因爲標籤不是垂直對齊的。

是否有任何方法可以垂直對齊標籤，理想情況下不需要引入額外的HTML元素（因爲這會混淆Bootstrap本身內定義的一些直接後代規則）？

來源

2013-02-12 Dónal

引用鏈接無法正常工作.. – Kingk 2013-02-12 12:13:33

如果你的圖標是一個標準尺寸，比如16px，那麼你可以使用'left'或inner'a'的左邊的偏移量：left：-16px;'+任何額外的像素微調。可能還需要在'ul'和'li's的位置上使用'position：relative'。 – 2013-02-12 12:14:29

試試這個：

.nav-pills.nav-stacked > li > a { 
    padding-left: 25px; 
} 


.nav-pills.nav-stacked > li > a > i { 
    position: absolute; 
    margin-left: -25px; 
}

它採用的圖標跳出流程，使文字25px的右邊，然後定位圖標25像素向左

來源

2013-02-12 12:16:02 Andy

垂直對齊的HTML列表文本

回答

相關問題