HTML 网站开发：用于导航和菜单的 div 与 ul答案

【问题标题】：HTML site development: div's vs ul's for navigation and menusHTML 网站开发：用于导航和菜单的 div 与 ul
【发布时间】：2010-10-24 03:05:18
【问题描述】：

我正在开发一个 Web 2.0 站点，并且一直在研究站点如何处理菜单和导航栏。许多网站（如 twitter）使用 UL，而诸如 stackoverflow 之类的网站使用 div，它们是包含链接的 ID。

不使用 UL 除了消除一些 IE 错误之外还有其他好处吗？

使用 UL 有什么好处吗？

谢谢！

【问题讨论】：

【解决方案1】：

这取决于你如何看待它，UL代表无序列表。将事物放入 UL 元素中是一种语义方式，表示子元素 (<li>) 是列表项，因此是一个逻辑组。这使得 html 块比一堆 div 标签更具结构/意义。

菜单是列表吗？我想是这样。因此，如果您可以为这样的事情选择 ul。

ul 可能更难用 css 设置样式，尤其是当菜单是水平的时。

【讨论】：

我同意除了最后一句话之外的所有内容。它们真的很容易设置样式，几乎就像一个 div 实际上你可以将 li 元素设置为 display: 块，此时你有自己的东西很像一个 div。
注意那个句子中的can这个词，指的是水平的。一旦你知道它不是那么糟糕......但它确实需要更多的 css 和知识来设置 ul 的水平样式，而不是显示刻度等......

【解决方案2】：

UL 对屏幕阅读器更友好，并且是一种强制您保持菜单与其他 html 无关的方法。如果你愿意的话，li-tags 基本上可以像 div 一样处理。

所以基本上区别在于 ul-tag 更专业一些，但可以提供与 div 基本相同的东西。

【讨论】：

【解决方案3】：

我个人使用 ul/li 来满足我所有的菜单需求，因为即使是没有样式的浏览器（例如链接）也可以清楚地知道它是某种菜单，并且它们是通向不同部分的各种链接一个网站。

不仅如此，标记非常简单，并且允许使用 ul、li 和 a 来完成非常有趣的事情，使用带有各种选项的 CSS 制作很棒的菜单，CSS sprite 背景。

使用 div 也可以做到这一点，但会使意图变得不那么清晰。使用正确 CSS 布局的浏览器，您不会注意到差异，唯一知道的是您和执行视图源的用户。

如果你需要使用 javascript 解析 dom 可能会有所不同，它可能不会......

【讨论】：