0

bootmetro フレームワークを使用して、ヘッダーに 2 つのメニューを定義しようとしています。1 つ目はメイン メニューで、2 つ目はユーザー メニューです。

なんらかの理由で、メニュー項目の行間が大きすぎて、2 回目にメニューが正しく表示されません。

メニューの作成に使用されるコードは次のようになります

<div class="dropdown">
    <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
        Actions
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li class="divider"></li>
        <li><a href="#">item4</a></li>
    </ul>
</div>

私が遭遇した問題は、以下のスクリーンショットに示されています。私の 2 番目のメニューでは、メニュー項目はメニューのすべてを使用しません。

アップデート：

問題は bootmetro CSS スタイルシートにあるようで、firebug は検索を少し絞り込みます (Thanh Trung に感謝します!)。検査モードでは、a href が 2 番目のメニューのメニュー項目 (li) を埋めていないのに対し、最初のメニューでは最大幅になっていることがはっきりとわかります。

bootmetro CSS の部分は次のようになります。

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
}

追加の質問: この '>' は何を引き起こしますか? 私は前にそれを見たことがありません。

両方のメニューで CSS クラス「dropdown-menu」が使用されますが、この CSS クラスの本体を削除すると、それに応じて最初のメニューのみが変更されます。

主な質問: では、なぜこのクラスが 2 番目のメニュー項目に適切に継承されないのでしょうか?

完全を期すために、2 番目のメニュー (アーティファクトを表示するメニュー) の HTML コードを再度示します。

<div class="dropdown pull-left">
        <a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
            <b class="icon-settings"></b>
        </a>
        <ul class="dropdown-menu pull-right">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Settings</a></li>
            <li class="divider"></li>
            <li><a href="#">Log out</a></li>
        </ul>
    </div>

メニュー 1

正しく視覚化されたメニュー

メニュー 2

誤って視覚化されたメニュー

メニュー 3

検査：「a」が全幅をとっていません

メニュー 4

検査：リストアイテムは全幅を取っています

4

1 に答える 1

1

コードは同じですが、表示に違いがあるので、cssが影響していることになります。CSS が提供されなければ、何が問題なのかを判断することは不可能です。

要素の高さ全体に影響を与える可能性のある css プロパティは次のとおりです: height、line-height、padding、margin。

Firebug または Chrome インスペクタを使用して要素を検査し、そのスタイルを確認できます

アップデート

bootmetro.css 行 2018 が影響 (オーバーライド) しています

#top-info a {
   display: inline-block;
   height: 46px;   /**** should be removed or override *****/
   color: #5A5A5A;
}

また、Firebug (Firefox のアドオン) を使用して要素を検査することをお勧めします。Firefox のインスペクターは使用しないでください。

于 2013-01-12T14:25:11.683 に答える