ra.htial ra.htial - 3 months ago 8
CSS Question

how to align all my li on one line?

my CSS

ul{
overflow:hidden;
}
li{
display:inline-block;
}


my HTML

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>


i want to align all my li items in one line, if i did that everything works fine except that when 3 or 4 li's fills the first line on my body they go the the second line, i want them to be on 1 line and everything after the 1 line is filled will be "hidden"

FOR EXAMPLE ::

// NOTE li holds sentences not just 1 letter

OUTPUT NOW ::

a b c d
e f g


DESIRED OUTPUT ::

a b c d e f //all of them in 1 line and the rest of them are hidden 'overflow:hidden'

Ray Ray
Answer

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)