如何将整个<li>元素作为链接？

Question

我无法使整个li元素可点击。我试过显示属性，但没有任何帮助。这是一个代码：

#top_menu ul li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
}

#top_menu ul li a {
  display: block;
  padding: 0 14px;
  margin: 6px 0;
  line-height: 28px;
  text-decoration: none;
  color: #fff;
}

#top_menu ul li:hover>a {
  color: #8fde62;
}

#top_menu ul ul {
  position: absolute;
  opacity: 0;
  background: rgba(70, 70, 70, 0.7);
}

#top_menu ul li:hover>ul {
  opacity: 1;
}

#top_menu ul ul li {
  height: 0;
  overflow: hidden;
  padding: 0;
}

#top_menu ul li:hover>ul li {
  height: 36px;
  overflow: visible;
  padding: 0;
}

#top_menu ul ul li a {
  padding: 4px 0 4px;
  margin: 0;
  border: none;
  border-bottom: 1px solid #353539;
}

<ul>
  <li><a href="#">Additional</a>
    <ul>
      <li><a href="#">Commands</a></li>
      <li><a href="#">Guides</a></li>
    </ul>
  </li>
</ul>

这是结果（在列表左侧有空格 - 未激活）：

那么我做错了什么？我该如何解决这个问题？

Answer 1

左侧的填充是由<ul>引起的。如果您将其设置为padding: 0;，则会删除空格，并允许您根据需要设置<li>或<a>

Example

Answer 2

我认为你有点困惑这个问题。 <a>可以在<li>内占用尽可能多的空间。

我认为你缺少的是默认情况下的列表，使用边距进行样式设置以及侧边填充，你可以删除它：

ul {
    padding: 0;
}

Answer 3

正如其他人所说，a可以填充li内可用的整​​个空间。这是一个有效的示例，但我必须调整您的颜色并html才能使代码段生效。

＆＃13;

＆＃13;

body{background: black;}
#top_menu ul li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
}

#top_menu ul li a {
  display: block;
  padding: 0 14px;
  margin: 6px 0;
  line-height: 28px;
  text-decoration: none;
  color: #fff;
}

#top_menu ul li:hover>a {
  color: #8fde62;
}

#top_menu ul ul {
  position: absolute;
  padding: 0;
  opacity: 0;
  background: rgba(70, 70, 70, 0.7);
}

#top_menu ul li:hover>ul {
  opacity: 1;
}

#top_menu ul ul li {
  height: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

#top_menu ul li:hover>ul li {
  height: 36px;
  overflow: visible;
  padding: 0;
}

#top_menu ul ul li a {
  padding: 4px;
  margin: 0;
  border: none;
  border-bottom: 1px solid #353539;
}

＆＃13;

<div id="top_menu">
  <ul>
    <li><a href="#">Additional</a>
      <ul>
        <li><a href="#">Commands</a></li>
        <li><a href="#">Guides</a></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

Yo需要使用javascript或jquery才能将事件附加到整个li元素。 如果您决定使用jquery，则需要添加一个类或ID来标识您要定位的li，然后您需要将相应的事件附加到其中。

$( "#top_menu ul li" ).click(function() {
    alert( "Handler for .click() called." );
});

更多信息：https://api.jquery.com/click/