CODEWITHSUNDEEP
htmlcssxhtmlxhtml-1.0-strict
Pieter
Pieter

Reputation: 32765

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

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

Upvotes: 5

Views: 4657

Answers (3)

vernonk
vernonk

Reputation: 1221

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.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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.

Upvotes: 5

Nick Craver
Nick Craver

Reputation: 630419

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.

Upvotes: 2

Related Questions