Зачем получать список меню снизу вверх в CSS?

Question

Мне нужно выровненное по правому краю простое меню. Но я получаю меню со списком тегов li снизу вверх. Я хочу отобразить его сверху вниз в выровненном по правому краю меню.

HTML:

<ul class="menu">
  <li>HOME</li>
  <li>ABOUT</li>
  <li>HOW it WORKS</li>
  <li>SERVICE PROVIDERS</li>
  </ul>

CSS:

.menu{
    list-style:none;
}
.menu li{
    float:right;
    padding:10px;
}

я получаю вывод как изображение ниже

Answer 1

В настоящее время вы добавляете float to li elements вместо этого добавьте это к .menu и измените li display as inline-blocks, это будет один из способов сделать это.

Обновление -

float: right- Элемент плавает справа от своего контейнера.

Согласно приведенному выше утверждению, float направляет элемент справа к контейнеру, таким образом, здесь первый элемент li плавает прямо к концу контейнера, а затем следует другой. Добавьте свойства width между тегами li, чтобы лучше понять и даже измените свойство float, чтобы увидеть разницу в том, как элементы плавают.

.menu {
  list-style: none;
  float: right; /*Add this*/
}

.menu li {
 display:inline-block; /*Add this*/
 padding: 10px;
}

<ul class="menu">
  <li>HOME</li>
  <li>ABOUT</li>
  <li>HOW it WORKS</li>
  <li>SERVICE PROVIDERS</li>
</ul>