如何删除链接和中的列表项之间的所有填充？或者......点击打开里面的链接？

My code:

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

I can click on the outside of any of the list items(li), and the link won't open (like there is padding between the link itself and the list item it lives in). I want to be able to click on any part of the list item and for the link inside of it to open.

我可以点击任何列表项(li)的外部,链接将不会打开(就像链接本身和它所在的列表项之间有填充)。我希望能够单击列表项的任何部分,并打开其中的链接。

I've been fiddling with inline CSS to try and force the behavior I want but still no luck. Help?

我一直在摆弄内联CSS试图强迫我想要的行为,但仍然没有运气。帮帮我?

2 个解决方案

#1

Create a pseudo-element on the anchors, which covers their list items, including the bullets:

在锚点上创建一个伪元素,它覆盖了列表项,包括项目符号:

.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 */
}

Snippet:

.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

Give the ul a font-size: 0; and then set the font-size on either the list items or anchor elements.

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

#1