如何使整個鏈接在無序列表中可點擊

我有一個無序的鏈接列表，我需要使整個列表項可點擊。如何使整個鏈接在無序列表中可點擊

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

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

來源

2017-05-23 Billy Ferguson

你的問題是，填充被應用到您的li元素。這裏是整個區域被點擊小提琴（簡化你的下邊框規則以及）：https://jsfiddle.net/eowznujs/

來源

2017-05-23 15:53:51 chriskirknielsen

'a'標籤上'1em'填充的操作用法是什麼？ –

@BillyFerguson在這一點上，我只是假設它使用默認的'font-size'作爲'padding'值。使用'16px'而不是'1em'也可以，但是假設你改變了'ul'的'font-size'，文本的大小以及填充都會受到影響。 – chriskirknielsen

使用的CSS

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

現在我明白了，你知道這一點。你的問題是李元素上的填充。剛分配填充：0到li元素，並應用填充到裏選擇這樣

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

來源

2017-05-23 15:49:53

我認爲這個問題OP所問的問題是爲什麼'a'沒有用'height：auto'填充'li' – Scott

你去那裏：

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

來源

2017-05-23 15:59:30 wired

如何使整個鏈接在無序列表中可點擊

回答

相關問題