子级别列表子弹的奇怪位置

Question

我有一个包含多个嵌套无序列表的列表 - 最多七个嵌套列表。如果列表项的文本分为两行，则项目符号不再垂直对齐。我怎样才能解决这个问题？ See example here

问题标有红色。我还没有能够使用:pseudo elements修复它...

见图片：

有什么想法吗？

Answer 1

<a>代码中的<li>代码为display: inline-block。内联块的默认垂直对齐方式为vertical-align: baseline。

如果您添加此代码，则可以使用

ul.sidebar-items li ul li ul li a {
  vertical-align: top;
}

http://jsfiddle.net/5kr8qqjh/5/

附录

我猜你没有正确的控制权。 首先，您为a标签指定display: table-cell规则。我不知道你正试图用这个以及其他display: table和display: table-row规则来实现，但我认为，它们并非必要。所以放弃所有这些，然后你就不需要display: inline-block。

http://jsfiddle.net/5kr8qqjh/7/

Answer 2

看起来完全没问题，这是预期的。如果您不希望它们转到底部，请使用：

vertical-align: top;

所以，你走了：

ul.sidebar-items > li a {
  vertical-align: top;
}

你也错过了一些结束</li>。解决了这里的一切：

小提琴：http://jsfiddle.net/uvk8aaLd/2/