how to align all my li on one line?

前端 未结 7 1298
灰色年华
灰色年华 2020-12-31 02:57

my CSS

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

my HTML

  • a
  • b
7条回答
  •  予麋鹿
    予麋鹿 (楼主)
    2020-12-31 03:32

    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

提交回复
热议问题