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

Question

现在这显示为： text 1 2 3 4 列表与文本水平内联。有没有办法让列表垂直显示，同时仍然与文本保持内联？（而不是文本 1 2 3 4，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 示例

Answer 2

添加display:block;到您的li元素中，将 #text 修改为display:inline-blockand 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;
}