Вправо выровняйте последний из нескольких встроенных блоков

49
4

Если у меня есть неупорядоченный список с 5 элементами списка. Элементы списка устанавливаются для display: inline-block чтобы они стекались горизонтально, выравнивались влево.

Но если я хочу, чтобы последний элемент списка был выровнен по правому краю. Есть ли хороший способ сделать это без использования float?

спросил(а) 2015-04-08T19:04:00+03:00 4 года, 10 месяцев назад
1
Решение
81

Без использования float вы можете сделать так:

li:last-child {
position: absolute;
right: 10px;
}

Скриншот здесь

PS Вы можете изменить значение "справа", если хотите поместить последний элемент ближе к другому li или ближе к границе

ответил(а) 2015-04-08T19:31:00+03:00 4 года, 10 месяцев назад
36

Вы можете использовать psudeo-element :: before, чтобы очистить float. Взгляните на следующий пример, используя last-child:


ul li {
width: 100px;
height: 50px;
display: inline-block;
background: red;
}
ul li:last-child {
float: right;
}
ul li:last-child:before {
content: '';
clear: both;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

ответил(а) 2015-04-08T19:22:00+03:00 4 года, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема