1

Есть список, два последних li нужно прижать к правому краю
Как сделать, понятия не имею, подскажите пожалуйста

.menu {
  width: 100%;
  background-color: #000000;
}

.menu .ul_menu {
  display: flex;
}
.menu .ul_menu .li_menu {
  padding: 13px;
}
.menu .ul_menu .li_menu .a_menu {
  font-size: 18px;
  text-decoration: none;
  padding: 8px;
  color: #ffffff;
}
<nav class="menu">
 <ul class="ul_menu">
            <li class="li_menu"><a href="#" class="a_menu">Панель1</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель2</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель3</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель4</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель5</a></li>
        </ul>
</nav>

Как прижать панель 4 и 5 к правому краю

2 ответа 2

2

.menu {
  width: 100%;
  background-color: #000000;
}

.menu .ul_menu {
  display: flex;
}
.menu .ul_menu .li_menu {
  padding: 13px;
}
.menu .ul_menu .li_menu .a_menu {
  font-size: 18px;
  text-decoration: none;
  padding: 8px;
  color: #ffffff;
}

.li_menu:nth-last-child(2) {
  margin-left: auto;
}
<nav class="menu">
 <ul class="ul_menu">
            <li class="li_menu"><a href="#" class="a_menu">Панель1</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель2</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель3</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель4</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель5</a></li>
        </ul>
</nav>

-1

Можно пойти по-простому пути и сделать отступ для 4 элемента, будет что-то вроде

.menu .ul_menu .li_menu:nth-child(4){
    margin-left: 55%;
}

Либо же разбить меню на два списка и один выравнивать по левому краю, другой по правому.

    <nav class="menu">
        <ul class="ul_menu menu_left">
            <li class="li_menu"><a href="#" class="a_menu">Панель1</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель2</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель3</a></li>
        </ul>
        <ul class="ul_menu menu_right">
            <li class="li_menu"><a href="#" class="a_menu">Панель4</a></li>
            <li class="li_menu"><a href="#" class="a_menu">Панель5</a></li>
        </ul>
    </nav>
.menu {
  width: 100%;
  height: 100px;
  background-color: #000000;
}
.menu_left{
    float: left;
}
.menu_right{
    float: right;
}
1
  • Конечно метом работать будет, но не особо хороший способ. Спасибо за Ваш ответ и уделенное время :)
    – Danil
    Commented 5 мая 2022 в 21:49

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.