通常のエディタのサイドバーを実現したいと思います.1つのファイル名にマウスカーソルを合わせると、行全体が暗い背景色に変わります。行全体の背景色を変更します
ただし、ファイル名が<ul>である場合、次のコードは背景色を<li>に変更するだけです。ホバーがある行全体の背景色を変更する方法を知っていますか？実際に行全体が変更され
.sidebar {
width: 102px;
background-color: #f3f3f3
}
li:hover {
background-color: #cccedb
}<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>。問題は、ul要素のデフォルトのパディングです。削除すると、何が起こるかがわかります。必要に応じて箇条書きを内側に保つために、list-style-position: inside;を追加する必要があります。また、li要素にpadding-left: 20px;を追加して、ulにパディングしたときと同じ位置に入ることもできます。してください以下のスニペットを参照してください。
.sidebar {
width: 102px;
background-color: #f3f3f3;
}
li{
padding-left: 20px;
}
li:hover {
background-color: #cccedb;
}
ul{
padding: 0;
list-style-position: inside;
}<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>'ul li {padding-left：20px; } '元のスペーシングを保持するには –
@RoryMcCrossan、はい、あなたは正しいです、私の答えを更新しました。 – Ionut
てみてください、
.sidebar ul{
padding: 0;
margin: 0;
list-style: none;
}
.sidebar ul li{
padding: 5px;
}
問題が報告およびパディングです。
は、問題が<ul>は間隔がそれらの弾丸に任せることになり、デフォルトとしてパディングを持っていることであるul
list-style-type:none;
padding:0px;
.sidebar {
width: 102px;
background-color: #f3f3f3
}
ul{
list-style-type:none;
padding:0px;
}
li:hover {
background-color: #cccedb
}<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>にこれを追加します。必要に応じて、箇条書きと間隔を削除してその動作を無効にすることができます。これは、paddingを0に設定して行います。その後、弾丸を保持する場合は、li:beforeを使用して、箇条書きをコンテンツとして追加できます。総計•のユニコードは'\2022'です。次に、margin-rightを追加してください。
セレクタとしてulのみを使用すると、ドキュメント内のすべてのリストが影響を受けるため、.sidebar ulをセレクタとして使用しました。あなたの目標ではないかもしれません。 .sidebar ulは、クラス名が "sidebar"の要素の<ul>要素がこれらの規則を適用するために選択されていることを意味します。
.sidebar {
width: 102px;
background-color: #f3f3f3
}
li:hover {
background-color: #cccedb
}
.sidebar ul {
padding: 0;
}
.sidebar li:before {
content: '\2022';
margin-right: 2px;
}<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>ul, li{
padding:0px;
/* you need to remove default padding of ul */
}
.sidebar {
width: 102px;
background-color: #f3f3f3
}
li:hover {
background-color: #cccedb
}<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
@RoryMcCrossan、はい、それは 'のlist-style-位置、可能である：内部;'はまさにそれを行います。 – Ionut
うん、あなたは正しい - 良い解決策 –