如何删除我的 link <a> 和它位于 <li> 中的列表项之间的所有填充?或者...点击 <li> 打开里面的 link ?
How can I remove all padding between my link <a> and the list item it lives in <li>? or... click on <li> opens the link inside of it?
我的代码:
<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),link 打不开(就像 link 本身和列表项之间有填充住在)。我希望能够单击列表项的任何部分并打开其中的 link。
我一直在摆弄内联 CSS 来尝试强制执行我想要的行为,但仍然没有成功。有帮助吗?
给ul一个font-size: 0;然后在列表项或锚元素上设置字体大小。
在锚点上创建一个伪元素,覆盖它们的列表项,包括项目符号:
.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>
我的代码:
<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),link 打不开(就像 link 本身和列表项之间有填充住在)。我希望能够单击列表项的任何部分并打开其中的 link。
我一直在摆弄内联 CSS 来尝试强制执行我想要的行为,但仍然没有成功。有帮助吗?
给ul一个font-size: 0;然后在列表项或锚元素上设置字体大小。
在锚点上创建一个伪元素,覆盖它们的列表项,包括项目符号:
.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>