问题
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
- ..
tag and this code in general is the right thing to do.
回答1:
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.
来源：https://stackoverflow.com/questions/18289070/two-ul-and-br-inside-div-is-this-ok-to-use