How to align all li on one line

 HTML

<UL class="fruit-prop">
    <LI>Apple</LI>
    <LI>Orange</LI>
    <LI>Banana</LI>
    <LI>Mango</LI>
</UL>

CSS

ul.fruit-prop {
  display: table;
  width: 100%;
  text-align: center;
}

ul.fruit-prop > li {
  display: table-cell;
}
SCSS
ul {
  &.fruit-prop {
    display: table;
    width: 100%;
    text-align: center;
    
    > li {
      display: table-cell;
    }
  } 
}