0

上部にナビゲーションバーがposition：fixedとして設定されているWebレイアウトに取り組んでいます。幅：100％; ユーザーがスクロールしても、ビューポートの上部に留まり、ページの幅を占めるようになります。次のように、中央に配置された水平方向の順序付けられていないリンクのリスト（幅940px）をその中に入れたいと思います。

<nav id='nav-bar'>
    <ul>
        <li><a href='#'>text</a></li>
        <li><a href='#'>text</a></li>
        <li><a href='#'>text</a></li>
        <li><a href='#'>text</a></li>
        <li><a href='#'>text</a></li>
    </ul>
</nav>

表示と位置/フロートなどのさまざまな組み合わせを試しましたが、ページのサイズを変更しようとすると、リストが2行に折り返されることなく中央に配置できませんでした。リストを含めるために他のラッパーが必要になる可能性があると思います。

4

3 に答える 3

0

このフィドルを試してください http://jsfiddle.net/gajjuthechamp/JuYpT/

その唯一margin:autoとdisplay:inline-blockあなたが必要です。

于 2012-08-29T10:53:33.307 に答える
0

li要素内に要素の単一行を適用し、ulそれらを中央に配置するには、次のようにします。

#nav-bar {
    white-space: nowrap;
    text-align: center;
}

li要素をこれらのルールに従わせるには、または：のいずれかを使用します。 inlineinline-block

#nav-bar li {
    display: inline-block; /* allows width and height to be set on the element ('inline' does not) */
}

JSフィドル：

最後に、要素が小さくなりすぎないように設定され%た、相対幅（in）の使用を示すデモ：http： //jsfiddle.net/davidThomas/FWtFe/3/min-widthli

于 2012-08-29T10:46:29.307 に答える
0

fixedコンテンツを親にラップする必要があります。

<div id="fixed-element">
    <nav id='nav-bar'>
        <ul>
            <li><a href='#'>text</a></li>
            <li><a href='#'>text</a></li>
            <li><a href='#'>text</a></li>
            <li><a href='#'>text</a></li>
            <li><a href='#'>text</a></li>
        </ul>
    </nav>
</div>​

そしてそれにcssを適用します：

#fixed-element{position:fixed:top:0;}
#nav-bar{position:relative;float:left;left:50%;}
#nav-bar ul{position:relative;float:right;right:50%;}
#nav-bar ul li{float:left;clear:none;display:inline-block;list-style:outside none;margin:0 5px;}​

これがjsfiddleへのリンクです

于 2012-08-29T10:50:45.873 に答える