可點擊李與不同數量的內部

Question

文本行我試圖使獨立於內容的點擊裏的，但有李內。例如下面的代碼具有隻用一個行一個按鈕和另一個四行：

<ul> 
    <li><a href="#">jkfasdf</a></li> 
    <li><a href="#">jkffasdf fjaskdfasfs jajklfd fjklasdfas</a></li> 
</ul> 

ul{ 
    background: red; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    float: left; 
} 

li { 
    padding: 10px; display: inline-block; 
    border-left: 1px solid white; 
    width: 100px; 
    text-align: center; 
    vertical-align: middle; 
} 
li:first-child {border-left: none;} 

a { 

} 

這裏是jsfiddle。

Answer 1

添加display:block到a標籤並給予padding標籤，而不是li

a { 
    display:block; padding: 10px; 
} 

DEMO