0

我在 XHTML 中有这个水平列表：

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
</ul>
<br/>
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
</ul>
</div>

CSS文件是这样的：

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #005546;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #005546;
}

浏览器中的输出是好的，我只想拥有一个块

    ..
在另一个之下，所以我想知道使用
标签和这段代码是否是正确的做法。

4

1 回答 1

2

标记本身很好，如果这就是你要问的。这都是有效的 XHTML。不过，我会在您的代码中添加一些标签，这样它就更具可读性。

实际上，您实际上并不需要换行符 - 我会说换行符在开发人员编写的代码中真的很少应用。（我只能在诸如翻译用户输入中的新行之类的事情上看到他​​们的真正目的）。在大多数情况下，您可以只使用 CSS 为元素添加边距。在您的情况下，您可以使用：

#navcontainer > ul:first-child { margin-bottom:10px; }

这margin-bottom只会在第一个列表中添加 10 个像素（因为您不想同时选择它们）

我要注意的最后一件事是，在您的情况下，您的列表看起来应该是单独的实体（即使用两个列表是有意义的）。如果您想在列表中分隔单个列表项，但仅使用一个仍然具有逻辑/语义意义，那么我会这样做，只需使用 CSS 在项目之间添加间距。

于 2013-08-17T13:14:55.080 回答