how to align all my li on one line?

css, html

Solution

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)

Problem

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' ```

Original source