如何在无序列表中使整个链接可单击

Question

我有一个无序的链接列表，我需要使整个列表项可以点击。

<li><a href="blah">This</a></li>

https://jsfiddle.net/69wzksdq/1/

Answer 1

您遇到的问题是填充正在应用于li个元素。以下是整个区域可点击的小提琴（简化了边框底部规则）：https://jsfiddle.net/eowznujs/

Answer 2

使用css

li a {
  display: inline-block;
  width: 100%;
}

现在我明白了，你知道这一点。你的问题是在li元素上填充。只需为li元素指定填充：0并将填充应用于li a选择器，如此

li { padding: 0 }
li a { padding: 16px; }

Answer 3

你去了：

＆＃13;

＆＃13;

 #groupchats ul {
        list-style-type: none;
    }

    #groupchats li{
      border-bottom:1.5px solid #69f0ae;
      background-color: #006064;
      display: block;
      padding: 0;
    }
    #groupchats li:last-child { border-bottom: none; }

    #groupchats li a {
      text-decoration: none;
      display: inline-block;
      width: 100%;
      padding: 16px;
      color: white;
    }

＆＃13;

    <div class="row col-md-8 col-md-offset-2" id="groupchats">


  <div id="groupchat-errors">


  </div>
    <ul id="groupchat-index" "demo-list-item mdl-list"> 
      <li class="mdl-list__item"><a href="/groupchats/estset">one</a></li>
<li class="mdl-list__item"><a href="/groupchats/meandjess">two</a></li>
<li class="mdl-list__item"><a href="/groupchats/nooooo">three</a></li>

</div>

＆＃13;

＆＃13;

＆＃13;