将div中的可点击链接扩展到整个父级li（仅CSS）

Question

背景：

我创建了一个ul菜单，其中包含2个divs->一个div用于图标，第二个div用于文本。 divs的原因是我希望文本整齐地垂直对齐，否则情况并非如此。

---

问题：

我设法用display: block;使整个第二个div可点击，但是我很难将链接扩展到div之外，从而使其延伸到整个li，即也覆盖了第一个div。

---

尝试：

我已经尝试在href标记上使用Bootstrap的.stretched-link（请参见第一个链接），并将position: relative;设置为所有divs和li。但是，这没有用。

---

问题：

是否可以在整个li上扩展链接，同时保持divs整齐对齐？

---

注意：

（a）我知道一种解决方法是将href标签放在li周围，但我知道这已不再是一种好习惯了。

（b）只是为了显示对齐问题，当删除divs时，我创建了第二个JSfiddle。

---

JSfiddle

（1）已包括divs，但图标div不可点击：https://jsfiddle.net/AlphaX/z5f60m23/11/

（2） divs已删除，整个li是可单击的，但是由于字体真棒图标默认情况下具有不同的宽度，因此文本未垂直对齐：{{3} }

Answer 1

只需做第二种方法，用<a>包装<i>和span，并添加一些其他样式规则：

li i {
  width: 20%;
  display: inline-block;
}

我也编辑了您的小提琴：https://jsfiddle.net/uxnfvzyc/1/