用填充環繞li的鏈接

Question

我有一個有很多列表項的無序列表。一些列表項是鏈接，有些則不是。我想添加填充到列表項，所以外觀是一致的，無論它是否是一個鏈接，也就是說，我不想將填充添加到錨點，而是添加到列表中，並且錨點要繞着鏈接添加AND填充。

儘管在懸停時使用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的li代替a糾正應用於hover的background-color使用：的

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); 
}