Question

现在显示为：text 1 2 3 4，列表与文本水平内联。有没有办法使列表垂直显示，同时仍保持与文本内联？（而不是文本1 2 3 4，2应该出现在1,2以下的1,3下面，但是列表仍然会出现在“text”的右边，并且与“text”在同一行中）

感谢任何帮助。谢谢！

HTML

<div id = "text">text</div>
<ul id="ulist">
   <li id="contents">1</li>
   <li id="contents">2</li>
   <li id="contents">3</li>
   <li id="contents">4</li>
</ul>

CSS

#ulist {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#contents {
    display: inline-block;
}

#text {
    display: inline;
}

#text2 {
    display: inline;
}

Answer 1

当然，摆脱你的规则，然后将div漂浮到左边：

#text {
    float:left;
}

请注意，ID 必须是唯一的。

<强> jsFiddle example

Answer 2

将display:block;添加到li个元素，将#text修改为display:inline-block和vertical-align: top，这会导致它们堆叠。

#ulist {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#ulist li {
    display: block;
}

#contents {
    display: inline-block;
}

#text {
    display:inline-block;
    vertical-align:top;
}

#text2 {
    display: inline;
}

保持列表与文本内联，同时保持列表垂直定位

2 个答案: