0

ナビゲーションを正当化する Bootstrap の例がうまくいかないので、独自の水平方向に正当化されたナビゲーションを構築しようとしました。コードは次のようになります。

<div class="row">
    <div class="col-lg-12">
        <ul id="navigation">
             <li class=""><a href="#">One</a></li>
             <li class=""><a href="#">Two</a></li>
             <li class=""><a href="#">Three</a></li>
             <li class=""><a href="#">Four</a></li>
             <li class=""><a href="#">Five</a></li>
             <li class=""><a href="#">Six</a></li>
             <li class=""><a href="#">Seven<</a></li>
             <li class="stretch"></li>
        </ul>
    </div>
</div>

使用された CSS:

#navigation {
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#navigation li {
    display: inline
}

#navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

ナビゲーションが最初に存在する場合、静的コードのように、すべてがうまく見えます。私のアプリケーションはナビゲーションを動的に作成するため、リンクは後で挿入されます。その後、正当化は機能しません。

の解き方？

4

4 に答える 4

1

このフィドル リンクを確認してくださいhttp://jsfiddle.net/Mohinder/PAvnp/

この HTML と CSS を Bootstrap CSS に追加して確認してください。

ここにHTMLがあります

<div class="row">
    <div class="col-lg-12">
        <ul id="navigation">
             <li class=""><a href="#">One</a></li>
             <li class=""><a href="#">Two</a></li>
             <li class=""><a href="#">Three</a></li>
             <li class=""><a href="#">Four</a></li>
             <li class=""><a href="#">Five</a></li>
             <li class=""><a href="#">Six</a></li>
             <li class=""><a href="#">Seven</a></li>
        </ul>
    </div>
</div>

ここにCSSがあります

#navigation {float:none; text-align:center; display:table; list-style:none; width:100%; }
#navigation li { float:none; display:table-cell; }
#navigation li a { display:block; line-height:20px; margin:0px 5px; }
于 2013-10-26T08:48:28.163 に答える
-1

"float:left" を li に使用する必要があります。

于 2013-10-26T08:31:18.043 に答える