两个<ul>和<br/>里面 <div>可以使用吗?

问题描述

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

<ul><li><a href="#">牛奶</a></li><li><a href="#">鸡蛋</a></li><li><a href="#">奶酪</a></li><br/><ul><li><a href="#">牛奶</a></li><li><a href="#">鸡蛋</a></li><li><a href="#">奶酪</a></li>

CSS 文件是这样的:

#navcontainer ul{边距:0；填充:0；列表样式类型:无；文本对齐:居中；}#navcontainer ul li { 显示:内联；}#navcontainer ul li a{文字装饰:无；填充:.2em 1em；颜色:#fff;背景色:#005546；}#navcontainer ul li a:hover{颜色:#fff;背景色:#005546；}

浏览器中的输出没问题，我只想将

..

的一个块放在另一个块下，所以我想知道是否使用
标记和此代码一般来说是正确的做法.

解决方案

标记本身没问题，如果这就是您的要求.这都是有效的 XHTML.不过，我会在您的代码中添加一些制表符，以便它更具可读性.

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

#navcontainer >ul:first-child {边距底部:10px;}

这将仅将 10 像素的 margin-bottom 添加到第一个列表(因为您不想同时选择它们)

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

I have this horizontal list in 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>

And the CSS file is this :

#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;
}

The output in the browser is OK, i just want to have the one block of

..

under the other, so i want to know if by using the
tag and this code in general is the right thing to do.

解决方案

The markup itself is fine, if that's what you're asking. It's all valid XHTML. I'd add some tabbing to your code however so it's more readable.

You don't actually need the line break, in fact - I'd go as far as to say line breaks really have very little application in developer-written code. (I can only see a real purpose for them in things such as translating new lines in user input). In most instances, you can just use CSS to add margins to your elements. In your situation, you could use:

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

That'll add a margin-bottom of 10 pixels to only the first list (as you don't want to select both of them)

A final thing I'd note is that in your case your lists seem like your lists should be separate entities (i.e. it makes sense to use two lists). If you wanted to space out a single list item in a list, but it still makes logical/semantic sense to use only one, then I'd go with that, and just use CSS to add spacing between the items.

这篇关于两个<ul>和<br/>里面 <div>可以使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！