html - 在段落中扩展 UL 列表

Question

我需要将 UL 列表放在 p 标签内。我只在 p 标签内添加了它，但它并没有完全从 p 标签内开始。而且 p 标签的宽度为 1600px，所以我需要 li 元素超出该宽度(我有 tat 的滚动条)。现在 li 元素在多行中流动。

这是我的演示 http://jsfiddle.net/VvuU4/2/

Answer 1

不幸的是，HTML 不允许 ul(或 div)位于 p 中，因此浏览器会自动更正 DOM这个:

<p>
    <ul><li>etc</li></ul>
</p>

...看起来像这样:

<p></p>
<ul><li>etc</li></ul>
<p></p>

您可以使用他们内置的开发人员工具来验证这一点。所以你需要改变你的标记。也许将 p 更改为 div？

---

至于问题的第二部分，这是一个很好的起点:

ul.list2 {
    width: 500px; /* adjust to suit your needs */
    overflow: auto;
    white-space: nowrap;
}
ul.list2 li {
    display: inline-block;
    vertical-align: top;
}

它将 ul 设置为在必要时使用滚动条，并告诉其中的内联元素不要换行。然后它将列表项设置为内联 block 项，这使它们并排放置(如显示:内联；)但表现得更像 block 项(即边距、填充、宽度、高度如您所料)。