Как выравнять горизонтальное меню по правой стороне? Как сверстать такое меню?

Question

[Наталия]

Answer 1

[Victorius13]

<div class="menu">
  <span>Первый</span>
  <span>Второй</span>
  <span>Третий</span>
</div>

.menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  Justify-content: flex-end;
}

Answer 2

[Viacheslav Mykhailov]

Здравствуйте, в таком случае у Вас есть два варианта:
1. float: right
Таким образом Вы "прижмете" весь блок к правому краю, потому рекомендую ставить этот стиль конкретно на список с меню.
2. text-align: right
В этом варианте Вы просто поставите позицию всего текста по правой стороне.

А подчеркивание можно реализовать при помощи border-bottom.
Хорошего вечера :)

Comments

[Виталий Киренков]

3. Flex

[Viacheslav Mykhailov]

Виталий Киренков, вариантов гигантское множество, но я предложил решения из "простых"...

Answer 3

[jamster]

я бы использовал родителя для контейнера меню с display:flex и свойством justiy-content: flex-end;

<div class="menu-parent">
 <div class="menu">
  <span>Первый</span>
  <span>Второй</span>
  <span>Третий</span>
 </div>
</div>

<style>

.menu-parent {

display: flex;
jusitfy-content: flex-end;
width: 100%;

}

</style>

P.S Ну либо text-align: right;