用填充环绕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); 
}