如何删除链接 <a> 和它位于 <li> 中的列表项之间的所有填充？或者...点击 <li> 打开里面的链接？答案

【问题标题】：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?如何删除链接 <a> 和它位于 <li> 中的列表项之间的所有填充？或者...点击 <li> 打开里面的链接？
【发布时间】：2018-01-26 05:04:53
【问题描述】：

我的代码：

<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 来尝试强制执行我想要的行为，但仍然没有运气。帮忙？

【问题讨论】：

为什么这被标记为c#？

标签： html css hyperlink padding listitem

【解决方案1】：

在锚点上创建一个伪元素，覆盖它们的列表项，包括项目符号：

.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>

【讨论】：

【解决方案2】：

给 ul 一个 font-size: 0;然后在列表项或锚元素上设置字体大小。

【讨论】：