Horizontal <ul> menu: how to fix the width of list items

Question

I have a horizontal <ul> menu. How can I fix the width of the <li> elements at, say, 250px each?

Answer 1

You can do this via CSS:

ul > li { width: 250px; }

Depending on your you're doing the horizontal menu, you may need a display:block; style as well.

Answer 2

Styling the A tag can help maintain consistency and give you a little more flexibility than styling the LI tag, espeically if you end up making multi-line menu items.

ul li {
   float:left;
}

ul li a {
   display:block;
   width:250px;
}

You should also use a CSS reset to maintain consistency between browsers.

Answer 3

What Nick and Diodeus both say is right, but unless you want all of your list items to have that width, you better throw an id on that ul and then target it in your CSS.