0

私は次のHTMLコードを持っています：

<body>
<div id='wrapper'>
    <ul id='nav'>
        <li><a href='#'>Link</a></li>
        <li><a href='#'>Link</a></li>
        <li><a href='#'>Link</a></li>
        <li><a href='#'>Link</a></li>
    </ul>
</div>

そして次のCSSコード：

#wrapper {width:960px; margin:0 auto;}

#nav {display: table;width:100%;}
#nav li {display: table-cell;}
#nav li a {display: block;text-align: center; border-bottom:1px solid #f00;margin:0 5px; padding:0 0 15px 0;}

このコードは、下部に水平メニューを生成しますborder。

何かのようなもの..

|   Link      Link       Link      Link   |
|_________  _________  _________ _________|
<-----------------  960px  --------------->

border最初と最後の項目のスペースを削除して、下部が最初のリンクの最初の文字と最後のリンクの最後の文字で垂直線で始まるようにすることは可能でしょうか。何かのようなもの...

|Link         Link       Link         Link|
|______     ________   ________     ______|
<-----------------  960px  --------------->

誰かがこれに対する素晴らしい解決策を手に入れましたか？

4

3 に答える 3

0

あなたの質問を正しく理解しているかどうかはわかりませんが、display：tableとdisplay：table-cellを実行する代わりに、li要素でfloat：leftを実行してみてください。そうすれば、それらはまだ水平に配置されますが、各liとその内容のパディングで個別のスタイリングを行うことができます。

于 2012-09-08T23:33:42.877 に答える
0

1 つの解決策は、リストの最初と最後の子をターゲットにすることです。

ul li:first-child a { margin-left: 0 }
ul li:last-child a { margin-right: 0 }

または、親コンテナーに負のマージンを設定できます。リストのラッピングの可能性がある場合（モバイルデバイスなど）、これはよりうまく機能すると思います。

ul { margin-left: -10px; margin-right: -10px }
于 2012-09-09T01:00:09.787 に答える
0

他にもいくつかのスタイルを作成する必要があります: firstElement、lastElement。そしてそれらを少し違った方法で扱います

    <li id='firstElement'><a href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
    <li id='lastElement'><a href='#'>Link</a></li>
于 2012-09-09T00:02:14.153 に答える