how to align all my li on one line?

Question

my CSS

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

my HTML

a
b
         


        

Answer 1

Using Display: table

HTML:

    
1
    
2
    
3

CSS:

ul.my-row {
  display: table;
  width: 100%;
  text-align: center;
}

ul.my-row > li {
  display: table-cell;
}

SCSS:

ul {
  &.my-row {
    display: table;
    width: 100%;
    text-align: center;

    > li {
      display: table-cell;
    }
  } 
}

Work great for me