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?

Dulaney

Answer 1

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.

Levalloisian

Answer 2

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.

Astounding

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.

Smedley