how to align all my li on one line

Question

my CSS  ul  overflow hidden    li  display inline-block      my HTML   lt ul gt   lt li gt a lt  li gt   lt li gt b lt  li gt   lt li gt c lt  li gt   lt li gt d lt  li gt   lt li gt e lt  li gt   lt li gt f lt  li gt   lt li gt g lt  li gt   lt  ul gt    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

User · Answer

Using Display  table  HTML    lt ul class  my-row  gt       lt li gt 1 lt  li gt       lt li gt 2 lt  li gt       lt li gt 3 lt  li gt   lt  ul gt    CSS   ul my-row     display  table    width  100     text-align  center     ul my-row  gt  li     display  table-cell      SCSS   ul      amp  my-row       display  table      width  100       text-align  center        gt  li         display  table-cell                 Work great for me

User · Answer

Try putting white-space nowrap  in your  lt ul gt  style  edit  and use  inline  rather than  inline-block  as other have pointed out  and I forgot

User · Answer

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

User · Answer

Other than white-space nowrap  also add the following CSS  ul li    display  inline

User · Answer

I m would recommend it    lt style gt       clearfix           zoom  1             clearfix before       clearfix after           content               display  table             clearfix after           clear  both            ul list          list-style  none            ul list li          display  inline-block         lt  style gt    lt ul class  list clearfix  gt       lt li gt li-one lt  li gt       lt li gt li-two lt  li gt       lt li gt li-three lt  li gt       lt li gt li-four lt  li gt   lt  ul gt

User · Answer

I think the NOBR tag might be overkill  and as you said  unreliable   There are 2 options available depending on how you are displaying the text   If you are displaying text in a table cell you would do Long Text Here  If you are using a div or a span  you can use the style  white-space  nowrap

User · Answer

This works as you wish    lt html gt   lt head gt       lt style type  text css  gt    ul    overflow-x hidden  white-space nowrap   height  1em  width  100       li    display inline                 lt  style gt   lt  head gt   lt body gt    lt ul gt    lt li gt abcdefghijklmonpqrstuvwxyz lt  li gt    lt li gt abcdefghijklmonpqrstuvwxyz lt  li gt    lt li gt abcdefghijklmonpqrstuvwxyz lt  li gt    lt li gt abcdefghijklmonpqrstuvwxyz lt  li gt    lt li gt abcdefghijklmonpqrstuvwxyz lt  li gt    lt li gt abcdefghijklmonpqrstuvwxyz lt  li gt    lt li gt abcdefghijklmonpqrstuvwxyz lt  li gt    lt  ul gt     lt  body gt   lt  html gt

[html] how to align all my li on one line?

Examples related to html

Examples related to css