View Full Version : Aligning elements on different lines in an inline list

mister eko
02-05-2007, 06:35 PM

I have an inline list (with background images as "bullets"), which I use as a menu.

Because of the length of each list item, they end up displayed like this:

>> item 1 >>item 2
>> item 3 >> item 4

How can I do if I want to have items 2 and 4 aligned automatically? I've googled a lot already, I'm not even sure it's doable.
If I use float:left;display:block instead of display:inline, can it help me?

Thanks for your help!

02-05-2007, 08:02 PM
Hello mister eko,
It shouldn't be too difficult. Give each li a width with text-align: left;

#menu li {
float: left;/*may or may not need the float*/
width: 147px;
height: 21px;

To be any more specific we'd need a look at your code.

mister eko
02-06-2007, 11:44 AM
I feel stupid now. Why didn't I think of that? Thanks :)

Can you explain me a few things?
- why float:left might or might not be necessary
- I don't need display:block besides float:left?
- can display:inline do the same thing instead? (EDIT: apparently not)

Here's my code:

ul {

li {
display:block; /* left if for now, used to be inline before I use float:left */
width:300px; /* followed your recommendation*
padding:0px 4em 0px 15px; /* padding-left is for the bullet */
background: url(images/bullet.gif) center left no-repeat;