Question

HTML列表项目符号线跳转到第二行。

表示：

<ul>
    <li>First list</li>
    <li>Second list continue to second line.</li>
</ul>

第一个清单

第二个清单继续
第二行。

如何使用CSS制作第二个列表子弹？

注意：仅在空间不足时才会发生这种情况。例如，当我在iPhone上查看它时，就像这样。但在我的电脑上看起来很正常。

Answer 1

如果您可以添加一些额外的标记，最好的办法是尝试使用 vertical-align 属性。

<ul>
    <li><em></em><span>First list</span></li>
    <li><em></em><span>Second list continue to second line.</span></li>
</ul>

CSS：

li em { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
li span {
    vertical-align: middle;
    display: inline-block; }

预览：http://jsfiddle.net/Wexcode/jB9Ad/

Answer 2

从我收集到的你的问题...你想要在该列表中显示另一个“INDENTED”无序/有序列表的内容...好吧，如果没有使用换行符或CSS，你可以这样做......

<ul>
   <li>This is an item within the parent List.
      <ul>
         <li>This is a child list item, and the beginning of a new list.</li>
      </ul>
   </li>
   <li>This is the second item within the parent list</li>
 </ul>

那应该有帮助！：）

Answer 3

如果您关心的只是iPhone或WebKit，请将您的li设置为溢出：省略号; firefox nightlies可能会支持它，但我知道ff还没有得到它。

HTML列表垂直对齐？

3 个答案: