Anyway to insert a line break in an unordered list using CSS?

I’m using an unordered list for my navigation and would like to have my links on 2 lines. Does anyone know if there’s a way in CSS to assign a class to an <li> to get it to go to the second line? The only other way I can see to do this is to use a <br /> in the <li> or 2 separate <ul>s.

You can do it like this:

http://www.hotdesign.com/seybold/22navbars.html

Thanks for the response.

What I’m trying to do is sort of a combination of the two referenced on that page. I want to have 5 links displayed horizontally on each line, but the problem is I need to force a line break so there will be 5 on each line instead of like 8 and then 2 if it auto wraps them.

Like this?


#twoLineList ul {
  margin: 0; padding: 0; list-style: none;
}
#twoLineList li {
  display: block; width: 20%; float: left; text-align: center;
}
#twoLineList a {
  color: green; font-weight: bold;
}


<div id="twoLineList">
<ul>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 2</a></li>
<li><a href="/">Link 3</a></li>
<li><a href="/">Link 4</a></li>
<li><a href="/">Link 5</a></li>
<li><a href="/">Link 6</a></li>
<li><a href="/">Link 7</a></li>
<li><a href="/">Link 8</a></li>
<li><a href="/">Link 9</a></li>
<li><a href="/">Link 10</a></li>
</ul>
</div>

why width 20% vinnie?

100%/5 = 20%. With ten items it will make two full-sized “lines” of list items.

I just did 100% as “take up the full width of the list”. If you have a 500px wide area for your list you can use 100px as well, which will work just the same.