html - 在段落中扩展 Ul 列表

Question

我需要将 UL 列表放在 p 标签内。我只在 p 标签内添加了，但它并不完全从 p 标签内开始。而且 p 标签也有 1600px 的宽度，所以我需要 li 元素超出该宽度（我有滚动条）。现在 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在必要时使用滚动条，并告诉其中的内联元素不要换行。然后它将列表项设置为内联块项，这使它们并排放置（如 display: inline;），但行为更像块项（即边距、填充、宽度、高度按您的预期工作）。