子级别列表项目符号的奇怪位置

Question

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

问题已标记为红色。我也无法使用 :pseudo elements 修复它...

见图：

有什么想法吗？

Answer 1

看起来完全没问题，这是预期的结果。如果你不想让他们走到底部，使用：

vertical-align: top;

所以，给你：

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

而且您还错过了一些结束语 </li>。已修复此处的所有内容：

Fiddle: http://jsfiddle.net/uvk8aaLd/2/

Answer 2

<li> 标签内的 <a> 标签为 display: inline-block。 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/

子级别列表项目符号的奇怪位置

Strange location of sub level list bullet

css

html-lists

附录