我的代码:
<ul class='sub-menu'>
<li><a href='something'>something</a></li>
<li><a href='else'>else</a></li>
<li><a href='another'>another</a></li>
</ul>
我可以单击任何列表项 (li) 的外部,但链接不会打开(就像链接本身和它所在的列表项之间有填充)。我希望能够单击列表项的任何部分并打开其中的链接。
我一直在摆弄内联 CSS 以尝试强制执行我想要的行为,但仍然没有成功。帮忙?
最佳答案
在 anchor 上创建一个伪元素,覆盖它们的列表项,包括元素符号:
.sub-menu li {
position: relative; /* to contain the absolute-positioned pseudo-element */
}
.sub-menu a:before {
content: ''; /* required for most pseudo-elements */
position: absolute; /* absolutely positioned */
top: 0; /* ... at top of its list item */
left: -50px; /* ... to the left of its list item, including the bullet */
right: 0; /* to its list item's right */
height: 100%; /* the height of its list item */
}
片段:
.sub-menu li {
position: relative; /* to contain the absolute-positioned pseudo-element */
}
.sub-menu a:before {
content: ''; /* required for most pseudo-elements */
position: absolute; /* absolutely positioned */
top: 0; /* ... at top of its list item */
left: -50px; /* ... to the left of its list item, including the bullet */
right: 0; /* to its list item's right */
height: 100%; /* the height of its list item */
}
<ul class='sub-menu'>
<li><a href='something'>something</a></li>
<li><a href='else'>else</a></li>
<li><a href='another'>another</a></li>
</ul>
关于html - 如何删除链接 <a> 和它位于 <li> 中的列表项之间的所有填充?或者...点击 <li> 打开里面的链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48450130/