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

Question

现在显示为:文本 1 2 3 4 列表与文本水平对齐。有没有办法让列表垂直显示，同时仍然与文本保持内联？ (而不是文本 1 2 3 4，2 应该出现在 1 的下方，3 出现在两者的下方，等等。但是列表仍然会出现在“文本”的右侧，并且与“文本”在同一行)

感谢任何帮助。谢谢!

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