Прижатия двух элементов списка к другому краю
Есть список, два последних 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 шт):
Автор решения: mazik7512
→ Ссылка
Можно пойти по-простому пути и сделать отступ для 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;
}
Автор решения: VladykoD
→ Ссылка
.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>