2

私は自分の個人的なサイトにナビゲーションを使用していますが、要素全体のulを変更する方法を一生理解できません。この fiddleを見ると、私が達成しようとしていることがわかります。私はいたるところを見てきましたが、テキストの左側の領域を「強調表示」する解決策が見つかりませんでした. さらに、 を説明する方法がわかりません。関連する CSS を次に示します。background-colorlimargin: 2px

#nav li {
    margin:2px;
}

#nav li:hover {
    margin:2px; <-- does not affect where the background color changes, it seems
    background-color:#b5aec8;
}

純粋な CSS を使用してナビゲーションの背景全体を変更する方法はありますか? もしそうなら、どのように？どんな提案でも大歓迎です！

4

2 に答える 2

6

フィドルから、要素からパディングを削除して<ul>要素に渡すだけで、<li>完全に色付けされます。

#nav {
    width:80px;
    -moz-box-shadow: 0px 3px 5px #888;
    -webkit-box-shadow: 0px 3px 5px #888;
    box-shadow: 0px 3px 5px #888;
    position: fixed;
    left:0;
    padding-left: 0px; /* ******* Changed to 0 */
    top:0;
    margin-top:25%;
    list-style: none;
    background-color: #ccc;
    color:black;
    font-family:Helvetica;
    z-index: 1;

}

#nav ul {
    list-style: none;
    padding-left:0px;
}

#nav a {               
    text-decoration:none;
    color:black;
}

#nav li {
    margin:2px;
    padding-left: 10px; /* ******* Returned to this element here */
}

#nav li:hover {
    margin:2px;
    background-color:#b5aec8;
}

こちらの例を参照してください。

于 2012-07-23T00:53:13.743 に答える
2

この回答を検討してください:これにより、要件を維持しながら、その内部に配置されpaddingます。lianchormargin

参考： jsFiddle

于 2012-07-23T01:13:37.313 に答える