html - 中にテキスト行の数が異なるクリック可能なli

Question

クリック可能なliをレンダリングしようとしていますが、liの内部にあるコンテンツからは独立しています。たとえば、次のコードには、1行だけのボタンと4行のボタンがあります。

<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与えるpaddingli

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

デモ