2

Github のようなナビゲーション バーを構築しようとしています (Bootstrap セレクターを使用せずに-この jsfiddlenav*を参照してください) ここに画像の説明を入力

だから私は次のHTMLを持っています:

<div class="container" style="margin-top: 20px;">
    <div class="span9">
        <ul class="unstyled main-tabs">
            <li>
                <a href="#">Link1</a>
            </li>
            <li>
                <a href="#">Link2</a>
            </li>
            <li>
                <a href="#">Link3</a>
            </li>
        </ul>
    </div>
</div>

span9ナビゲーション バーが画面の 9/12 だけを占有するように強制するために使用しているクラスに注意してください。

そして、次の CSS:

.main-tabs {
    position: relative;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: bold;
    background-color: #eaeaea;
    background-image: -moz-linear-gradient(#fafafa, #eaeaea);
    background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
    background-image: linear-gradient(#fafafa, #eaeaea);
    background-repeat: repeat-x;
    border: 1px solid #eaeaea;
    border-bottom-color: #cacaca;
    border-radius: 3px;
}

.main-tabs a {
    display: block;
    text-align: center;
    line-height: 35px;
    font-size: 12px;
    color: #777;
    text-decoration: none;
    text-shadow: 0 1px 0 white;
    border-right: 1px solid #eee;
    border-right-color: rgba(0,0,0,0.04);
    border-left: 1px solid #fcfcfc;
    border-left-color: rgba(255,255,255,0.7);
    border-bottom: 2px solid #DADADA;
}

.main-tabs li {
    list-style-type: none;
}

.main-tabs li .active {
    border-bottom: 2px solid greenyellow;
}

結果は次のとおりです。 ここに画像の説明を入力

私は次のように変更.main-tabs liしました：

 .main-tabs li {
        list-style-type: none;
        float: left;
    }

それで

.main-tabs li {
    list-style-type: none;
    display: block;
}

これでも同じ結果が得られます:(

しかし、これは本当に役に立ちませんでした。 ここに画像の説明を入力

質問lior要素 の幅をul(応答性の問題のために) ハードコーディングせずに、Github のものと同じナビゲーション バーを取得する方法はありますか?

4

2 に答える 2

2

jsFiddle Demo

demo with jQuery and a hover

対処すべき問題がいくつかあります。まず、各メニュー項目の幅を具体的に決定せずに、幅の推定を使用する必要があります。一般的なアプローチは、テーブル セルの計算に使用される組み込みアルゴリズムを使用することです。これを行うには、コンテナをdisplay:tableに、アイテムをに設定する必要がありますdisplay:table-cell。

また、 にはデフォルトのパディングがある傾向があるため、コンテナでulを使用して最初のパディングを削除する必要があります。padding-left: 0px;

最後に、アンカー要素のサイズが適切であることを確認してください。これは、 と で設定することを意味しdisplay: inline-block;ますwidth:100%。

于 2013-09-23T20:10:20.977 に答える