ansaurus

Question

how to align all my li on one line ?

Answer 1

+2 A:

Try putting white-space:nowrap; in your <ul> style

edit: and use 'inline' rather than 'inline-block' as other have pointed out (and I forgot)

Ray 2010-02-24 12:35:38

works like charm ..... THANKS A LOT

From.ME.to.YOU 2010-02-24 12:39:38

Answer 2

A:

Here is what you want. In this case you do not want the list items to be treated as blocks that can wrap.

li{display:inline}
ul{overflow:hidden}

2010-02-24 12:36:36

if the desired effect is to have scrollbars to see the rest of the lin, the `overflow` should be `auto` -- `hidden` will cut the line off and the rest of it won't be seen on screen.

henasraf 2010-02-24 13:10:43

Answer 3

+1 A:

This works as you wish:

<html>
<head>
    <style type="text/css"> 

ul
{ 
overflow-x:hidden;
white-space:nowrap; 
height: 1em;
width: 100%;
} 

li
{ 
display:inline; 
}       
    </style>
</head>
<body>

<ul> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
</ul> 

</body>
</html>

ck 2010-02-24 12:37:35

+1, i tested the above snippet.It is working as expected: > http://jsbin.com/acaxo3/edit

Rakesh Juyal 2010-02-24 12:41:16

ansaurus

tags:

views:

answers:

how to align all my li on one line ?

related questions