Question

我有以下HTML：

<ul>
    <li><span class="overflow">This is some more text</span></li>
    <li><span class="overflow">This is some more text</span></li>
    <li><span class="overflow">This is some more text</span></li>
    <li><span class="overflow">This is some more text</span></li>
    <li><span class="overflow" style="display: inline-block;">This is some more text This is some more text This is some more text</span><br /><span>This is some more text This is some more text</span></li>
</ul>

伴随着这个CSS：

ul { list-style-position: outside; list-style-type: circle; width: 150px; }

.overflow { display: block; height: 40px; overflow: hidden; }

出于某些特殊原因，overflow: hidden范围内的列表项在Chrome中没有任何项目符号。

好吧，除了最后一个，显然在溢出css类上将display: block更改为display: inline-block可以解决这个问题。但是，由于子弹点垂直居中对齐，这会给您带来另一个问题。

我真的希望一切都有道理......这是一个帮助说明的小提琴：http://jsfiddle.net/zUxTD/

总之，有没有办法在Chrome中垂直对齐项目符号？如果没有，那么是否有人知道为什么子弹点没有出现在其他列表项上（我认为这是某种错误）？

Answer 1

变化：

.overflow { display: block; height: 40px; overflow: hidden; }

到

.overflow { vertical-align:top; }

Chrome中的垂直子弹对齐？

1 个答案: