Html 可点击li'；s中有不同数量的文本行

我试图呈现可点击的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 {

}

保险商实验室{
背景：红色；
边框左上半径：5px；
边框左下半径：5px；
边框右上角半径：5px；
边框右下半径：5px；
浮动：左；
}
李{
填充：10px；显示：内联块；
左边框：1px纯白；
宽度：100px；
文本对齐：居中；
垂直对齐：中间对齐；
}
李：第一个孩子{左边界：无；}
a{
}

---

以下是.

添加

显示：将
块到
a
标记，并给标记添加
填充，而不是
li

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

@KyleSevenoaks如何转换为可点击的孔李。工作不完全正确，但继续尝试。你快到了！