0

ページの上部にナビゲーション バーがあり、リンクは横方向に配置されています。リンクをリー全体のサイズにしようとすると、すべてのリンクが重なり合ってしまいます。a タグを display:block; にスタイルしようとしました。幅は 100% ですが、めちゃくちゃです。これが私のコードです。誰か助けてくれますか?

    <div class="container">
        <ul id="top">   
            <li class="nav"><a href="#">Home</a></li>
            <li class="nav"><a href="#">Forum</a></li>
            <li class="nav"><a href="#">Play Now</a></li>
            <li class="nav"><a href="#">Download</a></li>
            <li class="nav"><a href="#">Hiscores</a></li>
            <li class="nav"><a href="#">Shop</a></li>
            <li class="nav"><a href="#">Vote</a></li>
        </ul>
    </div>

    .container {width:100%;}
    #top {list-style:none;padding:5px;background:#E8E1A5;}
    #top a {text-decoration:none;color:#1D486F;margin:0px;width:100%;}
    #top .nav {display:inline;border-right:1px solid black;width:100px;padding:5px 20px;}
4

2 に答える 2

0

nagに6つのリンクを入れようとしたときに同じ問題が発生し、5つのリンクに落ちて、正常にフォーマットされました。これがオプションかどうかはわかりませんが、試してみてください...

于 2013-10-02T23:40:38.837 に答える
0

http://jsfiddle.net/wYEJY/を参照してください

width:100pxに設定する代わりに試すことができ#top aます。ただし、アンカーはインライン要素なので、設定する必要がありますdisplay:inline-block。次に、幅を最小にして水平にするためにもに設定display:inline-blockします。#top .nav

したがって、次のコードを追加します。

#top a {width:100px;display:inline-block;}
#top .nav {display:inline-block;}

使用することもできます

#top a {display:block;}
#top .nav {display:inline-block;width:100px;}

しかし、これは IE 7 では機能しません。なぜなら、display:inline-blockablock 要素に設定すると要素としてレンダリングされるからblockです。

別のオプション: フローティング要素

#top{overflow:hidden;}
#top a {width:100px;display:block;}
#top .nav{float:left}

ここですべての可能性を確認できます: http://jsfiddle.net/wYEJY/1/

ただし、インライン要素がある場合は、それにwidthプロパティを追加できないことに注意してください。に変更する必要がありますinline-block。

また、フローティング要素を使用する場合は、忘れずに追加してください

<div style="clear:both"></div>

それらの後に、または浮動要素を含むラッパーに設定overflow:hidden(またはそれ以外のもの) します。visible

于 2012-08-17T23:58:02.113 に答える