順序付けられていないリスト内でリンク全体をクリック可能にする方法

Question

私はリンクの順序付けられていないリストを持っており、リスト項目全体をクリック可能にする必要があります。

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

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

Answer 1

のようなセレクタをli要素に0をとLiにパディングを適用するあなたが持っている問題は、パディングがあなたのli要素に適用されていることです。ここで（同様にあなたのborder-bottomルールを簡素化）全域がクリック可能であることとフィドルは次のとおりです。https://jsfiddle.net/eowznujs/あり

Answer 2

今私はあなたがこれを知っていることを、見

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

CSSを使用します。あなたの問題はli要素に埋められています。ただパディング割り当てる：この

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

Answer 3

あなたが行く：

#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; 
 
    }

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