2

我有以下 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 中没有任何项目符号。

好吧，除了最后一个，显然更改display: block为display: inline-block溢出 css 类可以解决这个问题。然而，这给您带来了另一个问题，因为项目符号点垂直居中对齐。

我真的希望一切都有意义......这里有一个小提琴来帮助说明：http: //jsfiddle.net/zUxTD/

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

4

1 回答 1

1

改变：

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

至

.overflow { vertical-align:top; }
于 2013-06-26T16:42:51.510 回答