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 要素を導入せずに、ラベルを垂直方向に揃える方法はありますか?

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;
}

フローからアイコンを取り出し、テキストを 25 ピクセル右に配置し、アイコンを 25 ピクセル左に配置します。

于 2013-02-12T12:16:02.020 に答える