Question

在this page上，右侧边栏中有一个菜单，该菜单由具有此结构的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中定义的直接后代规则）？

Answer 1

试试这个：

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


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

将图标移出流程，将文本25px放到右侧，然后将图标25px放在左侧

垂直对齐HTML列表中的文本

1 个答案: