詰め物付きのリールにつながるリンク

Question

私は多くのリスト項目を持つ順序のないリストを持っています。いくつかのリスト項目はリンクであり、いくつかはリンクではありません。私はリストアイテムにパディングを追加して、リンクかどうかにかかわらず外観が一貫しているようにします。つまり、アンカーにパディングを追加するのではなく、リストをアンカーに追加し、リンクを囲むようにします。パディング

ホバーでdisplay:blockを使用していますが、背景色はリンク内のテキストの周囲にのみあります。パディングは無視されます。リンクにパディングを入れないようにする方法はありますか？

ul li { 
 
    float: left; 
 
    line-height: 5em; 
 
    padding: 0 2em; 
 
} 
 
a:link { 
 
    display: block; 
 
} 
 
a:visited { 
 
    display: block; 
 
} 
 
a:hover { 
 
    display: block; 
 
    background-color: rgb(245, 245, 245); 
 
} 
 
a:active { 
 
    display: block; 
 
    background-color: rgb(245, 245, 245); 
 
}

<ul> 
 
    <li><a href="1.html">Item 1</a> 
 
    </li> 
 
    <li><a href="2.html">Item 2</a> 
 
    </li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li><a href="5.html">Item 5</a> 
 
    </li> 
 
</ul>

Answer 1

あなたは使用してhoverに適用さbackground-colorを修正するためにhoverに代わりaのliを使用することができます。

li:hover a { 
    display: block; 
} 
li:hover { 
    background-color: rgb(245, 245, 245); 
} 

の代わり：

a:hover { 
    display:block; 
    background-color:rgb(245,245,245); 
} 

デモは、以下を参照してください：

ここ

ul li { 
 
    float: left; 
 
    line-height: 5em; 
 
    padding: 0 2em; 
 
} 
 
a:link { 
 
    display: block; 
 
} 
 
a:visited { 
 
    display: block; 
 
} 
 
li:hover a { 
 
    display: block; 
 
} 
 
li:hover { 
 
    background-color: rgb(245, 245, 245); 
 
} 
 
a:active { 
 
    display: block; 
 
    background-color: rgb(245, 245, 245); 
 
}

<ul> 
 
    <li><a href="1.html">Item 1</a> 
 
    </li> 
 
    <li><a href="2.html">Item 2</a> 
 
    </li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li><a href="5.html">Item 5</a> 
 
    </li> 
 
</ul>

Answer 2

あなたが行く、私のコメントは、すべてを説明が、お気軽にすべきです。

<ul> 
    <li><a href="1.html">Item 1</a></li> 
    <li><a href="2.html">Item 2</a></li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li><a href="5.html">Item 5</a></li> 
</ul> 

ul{ 
    list-style-type: none; /* Feel free to remove this, just easier without bullets */ 
} 

ul li { 
    float: left;  
    line-height: 5em;  /* Should be the same as height */ 
    padding: 0 2em; 
    position: relative;  /* Make sure a & a:before can stay contained */ 
    height: 5em;   /* Should be same as line-height */ 
    white-space: nowrap; /* Ensure that your items don't wrap and mess up width */ 
    z-index: -1;   /* So that a:before is able to trigger with :hover */ 
} 

a{ 
    position: relative;  /* Make sure a:before can stay contained */ 
    display: block;   /* Ensures that a can expand to full size of container */ 
} 

a:before{ 
    content: "";   /* Necessary for :before element to be created */ 
    position: absolute;  /* Vital - allows positioning */ 
    top: 0; 
    right: -2em;  /* Minus same padding as li has */ 
    bottom: 0; 
    left: -2em;   /* Minus same padding as li has */ 
    z-index: -1;   /* Makes sure :before doesn't go above anchor text */ 
} 

a:hover:before, 
a:active:before { 
    background-color:rgb(245,245,245); 
}