Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 334
Pieter Avatar asked Apr 16 '10 14:04

Pieter


People also ask

How do I set horizontal space between list items?

To create space between list bullets and text in HTML, use CSS padding property. Left padding padding-left is to be added to <ul> tag list item i.e. <li> tag. Through this, padding gets added, which will create space between list bullets and text in HTML.

How can you make elements of a list display horizontal?

When you need to create a list that expands horizontally, you need to add the display:inline style to the <li> elements of the list. A horizontal list is commonly used for creating a website's navigation menu component.


1 Answers

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.

like image 108
Diodeus - James MacFarlane Avatar answered Sep 29 '22 13:09

Diodeus - James MacFarlane