html - 可点击的 li 里面有不同数量的文本行

Question

我正在尝试呈现可点击的 li，但独立于 li 内部的内容。例如下面的代码有一个按钮只有一行，另一个按钮有四行：

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

演示