Question

我在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;
}

浏览器中的输出没问题，我只想在另一块下面有一块

.. ，所以我想知道是否使用了
标签和这个代码一般是正确的做法。

Answer 1

标记本身很好，如果这就是你所要求的。这都是有效的XHTML。我会为你的代码添加一些标签，但它更具可读性。

实际上你实际上并不需要换行符 - 我甚至认为换行符在开发人员编写的代码中几乎没有应用。（我只能在诸如翻译用户输入中的新行之类的东西中看到它们的真正目的）。在大多数情况下，您可以使用CSS为元素添加边距。在您的情况下，您可以使用：

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

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

我要注意的最后一点是，在你的情况下，你的列表看起来像你的列表应该是单独的实体（即使用两个列表是有意义的）。如果你想在列表中找出一个列表项，但是它仍然只能使用一个列表中的逻辑/语义，那么我会使用它，并且只使用CSS来添加间距这些物品。

两个<ul>和<br/>内部<div>可以使用吗？</div> </ul>

1 个答案: