1

在此页面的右侧边栏中有一个菜单，该菜单由具有以下结构的 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 本身定义的一些直接后代规则）？

4

1 回答 1

2

试试这个：

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


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

它将图标从流中取出，将文本放在右侧 25px 处，然后将图标放置在左侧 25px 处

于 2013-02-12T12:16:02.020 回答