垂直对齐的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本身内定义的一些直接后代规则）？

引用链接无法正常工作.. – 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像素向左

垂直对齐的HTML列表文本

相关推荐