Question

为什么无序列表用于水平菜单而不仅仅是为<a>标签设置样式？我有这个CSS，它完美无缺：

#menu {
    width: 700px;
    height: 40px;
    position: absolute;
    bottom: 0px;
    left: 50px;
    background-color: #00604F;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    overflow: hidden;
}

#menu a {
    height: 20px;
    margin: 0px 5px;
    padding: 10px;
    display: inline-block;
    background-color: #0C61B4;
    color: #FFF;
    text-decoration: none;
}

#menu a:hover, #menu a:active, #menu a.active {
    background-color: #07396A;
}

#menu a:active, #menu a.active {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5) inset;
}

HTML看起来像这样：

<div id="menu">
    <a>Hello</a>
    <a>World!</a>
</div>

<a>标签可以包含您想要的任何属性（例如href，onClick等）。

Answer 1

实际上，您可以使用您想要使用的任何元素。毕竟这是你的网站。

使用uls的常见理由是菜单项是可以包含链接的对象。但它可能包含各种各样的东西。如果它是占位符或标题，它可能根本没有链接。您可能还在其中放置了另一个ul，并使用CSS为您提供下拉列表。

在我看来，链接就是这样。一条链接。如果它没有以某种方式导航你，那么它不应该是一个链接。如果您的所有菜单项始终都会导航，那么请务必使用a标记覆盖ul标记。

但您可能想要考虑未来的证明。当然他们现在都联系在一起，但未来呢。将样式应用于链接意味着如果您必须更改菜单的工作方式，请稍后返工。将样式应用于ul可为您提供更大的灵活性。

Answer 2

导航菜单基本上是一个链接列表，因此使用<ul>和<li>元素非常有意义。在<li>内，你可以有一个标签。

Answer 3

它的语义。导航是一个无序的链接列表，因此它们应该被标记为。

您的风格和内容应该分开。 HTML是内容，只应关注内容。 CSS应该只关注风格。

如果您的内容是无序列表，则无论具体实现如何，都使用无序列表标记。

Answer 4

嗯，主要原因是语义和便利性。

从语义上讲，<ul>元素封装了<li>的序列，这是导航菜单核心的含义，因为在文档内容框架（HTML）中的菜单完全由链接列表表示。

更重要的是，即使你单独设置了一堆<a>，你可能仍然需要一些容器来封装它们，所以几乎没有区别;最好使用旨在表示这种概念的东西，以便搜索引擎爬虫可以更容易地理解它的含义（这里涉及到语义）。

除此之外，正如在这个帖子中所说的，它是你的网站，你可以根据需要设计它。

Answer 5

它是使用菜单的标准方式。我的意思是它的共同点。但是你可以用自己的方式完成各种风格。

为什么无序列表用于HTML和CSS中的水平菜单？

5 个答案: