0

メニューでborder-rightを使用してセパレーター効果を実現しようとしています。ここに私のcssコードがあります

ul.navigation li a {
text-decoration:none;
float:left;
width:252px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:45px;
color:#000;
position:relative;
border-right:1px solid #333;
}

ul.navigation li a:last-child {
border:none;
}

私は何を間違っていますか？私も試しborder-leftてみ:first-childました。

4

2 に答える 2

3

私はあなたがこれをするつもりだと思っています

ul.navigation li:first-child a

everyaはその親の最初の子だからliです。a最初のliアイテムの内側を意味します。:)

于 2013-02-16T16:54:10.417 に答える
0

あなたの CSS スニペットは悪い習慣でいっぱいです。

以下は、スタイルを設定する方法と、各リスト項目間にセパレーターを追加する方法の例です。

.navigation { overflow: hidden; }    /* Explanation 1 */
.navigation li { float: left; }

.navigation li + li {                /* Explanation 2 */
    border-left: 1px solid #333;
}

.navigation li a {
    display: block;
    width: 252px;                    /* Explanation 3 */
    padding: 5px 0;                  /* Explanation 4 */

    background-color:#ccc;
    color:#000;
    text-align:center;            
}

  1. フロート封じ込め:この記事を読んでください。

  2. ここで私はあなたの質問に答えます: adiacent sibling selector を使用して、2 番目の li から最後の li までの境界線を適用します+。

  3. 幅を固定してもよろしいですか？

  4. テキストを垂直方向に揃えるための固定の高さと行の高さはありません。ちなみに、line-height には単位は必要ありません。この記事を読んでください。

    これがライブの例です: http://dabblet.com/gist/4968063

于 2013-02-16T18:01:45.443 に答える