Как убрать отступ у последнего элемента css
Для того, чтобы убрать отступ у последнего элемента, например в списке, можно воспользоваться псевдоклассом :last-child .
Рассмотрим пример. Имеется маркированный список, в правилах css задан отступ снизу у каждого элемента li в 10px;
123 456 789
li margin-bottom: 10px; > li margin-bottom: 10px; > li:last-child margin-bottom: 0px; > Как убрать отступ у последнего элемента в Slick slaider?
Как убрать отступ у последнего элемента в Slick slaider? Код не могу кинуть, если кто-то знает, подскажите, пожалуйста.
.my-slider .my-slider-one img(src='img/gallery-photo-slaider.png') p Татьяна Бикитеева .my-slider-one img(src='img/gallery-photo-slaider.png') p Татьяна Бикитеева .my-slider-one img(src='img/gallery-photo-slaider.png') p Татьяна Бикитеева .my-slider-one img(src='img/gallery-photo-slaider.png') p Татьяна Бикитеева .my-slider-one img(src='img/gallery-photo-slaider.png') p Татьяна Бикитеева .my-slider-one img(src='img/gallery-photo-slaider.png') p Татьяна Бикитеева.my-slider width: 88% margin: 0 5% 0 7% .my-slider .prev position: absolute left: -23px top: 33% cursor: pointer z-index: 1 .my-slider .next position: absolute top: 40% transform: translateY(-50%) cursor: pointer z-index: 1 right: 0$(".my-slider").slick(< slidesToShow: 4, slidesToScroll: 1, prevArrow: '
', nextArrow: '
' >);- Вопрос задан более трёх лет назад
- 363 просмотра
3 комментария
Средний 3 комментария
Отступ после последнего li в ul. Как убрать? [дубликат]
Проблема в ширине ul. Откуда берется отступ после последнего li в ul? Все padding и margin справа на нуле. Как можно убрать?
Отслеживать
задан 17 мая 2019 в 10:48
RedLionHeart RedLionHeart
73 1 1 серебряный знак 7 7 бронзовых знаков
Надо пример кода, желательно на jsfiddle или чем-то подобном.
17 мая 2019 в 12:19
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Если нужна выборка именно последнего элемента вы можете воспользоваться псевдоклассом last-child
:last-child < // тут ваши стили >Так же советую вам почитать про выборку с помощью псевдокласса nth-child()
Подробнее про last-chiild
В целом про псевдоклассы
Отслеживать
ответ дан 17 мая 2019 в 14:35
user298256 user298256
тут скорее вопрос про сам ul, нежели про последний li
17 мая 2019 в 15:20
Не совсем понятно о каком отступе после последнего li идет речь, т.к. на скрине показан лишь весь список целиком. Если речь идет об этом пустом пространстве:
То с чего вы взяли, что это отступ? У вас указана фиксированная ширина для списка в 62.5% и это, вполне возможно, просто пустое пространство, не заполненное элементами списка, которые, скорее всего (судя по скрину) так же сделаны через float:left . Чтобы дать более точный ответ на вопрос нужно смотреть на стили самих li и родительского элемента в котором лежит ul . Если задача стоит в распределении всех элементов li равномерно по всей ширине ul то можете использовать следующие стили для вашего элемента ul :
.main-nav
А если задача укоротить сам ul то просто сделайте ему меньшую ширину.
Как убрать отступ у последнего элемента css
Отрицаем всё! Исключаем из выборки селектора элементы с определённым признаком.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 18 июля 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Очень полезный псевдокласс, который поможет вам неплохо так сэкономить строчки кода. Суть работы этого парня — отсечь все элементы, не подходящие под условие. Звучит сложнее, чем выглядит.
Пример
Скопировать ссылку «Пример» Скопировано
Как вы наверняка уже знаете, между элементами принято задавать отступы так, чтобы у последнего или первого не было лишних отступов, чтобы они не торчали без дела и не меняли размеры родителя без причины.
Например, есть задача задать нижний отступ всем пунктам списка, кроме последнего:
Задаём нижние отступы всем пунктам списка:
li margin-bottom: 1em;>li margin-bottom: 1em; >
Сбрасываем нижний отступ у последнего пункта списка, чтобы не висел:
li:last-child margin-bottom: 0;>li:last-child margin-bottom: 0; >
Для самого простого решения этой задачи нам потребовалось 2 блока кода. Но, скорее всего, в вашем проекте нужно будет сбросить лишние отступы не только для этого элемента. Точно можно как-то проще.
Конечно можно! Сократим два блока кода до одного, используя псевдокласс :not . Выберем все пункты списка, кроме последнего, и зададим им нижние отступы:
li:not(:last-child) margin-bottom: 1em;>li:not(:last-child) margin-bottom: 1em; >
Вуаля! Красиво, аккуратно, а главное, работает ровно как задумывалось ��
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Берём любой селектор, ставим двоеточие и пишем ключевое слово not . После него ставим круглые скобки и внутри них указываем селектор, который должен быть исключён из выборки. Селектор в скобках может быть любым, главное чтобы он не включал псевдоэлементы. В скобках можно указать и несколько селекторов, перечисленных через запятую. В таком случае будут исключаться элементы подходящие под любой из перечисленных селекторов.
Ещё можно выбирать внутри body любой элемент, не являющийся, например, абзацем: body : not ( p ) . По аналогии можете выбирать любой элемент внутри определённого родителя, но не подходящий под условие.
Как понять
Скопировать ссылку «Как понять» Скопировано
Можно сказать заумно, что :not ( Х ) это функция, которая принимает в качестве аргумента селектор Х и находит в разметке элементы, не соответствующие этому самому элементу Х.
А можно проще: мы командуем браузеру «Выбери все элементы подходящие к селектору до :not и исключи из выборки все элементы, подходящие под селектор в круглых скобках».
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Слева от :not необязательно должен быть селектор. Можно написать :not ( . hidden ) , и браузер выберет вообще все элементы на странице, кроме тех, у которых есть класс .hidden .
�� Если очень захотеть — можно в космос полететь написать бесполезный селектор: :not ( * ) . Такой селектор выберет любой элемент, который не является любым элементом ��♀️
�� Нельзя вкладывать один :not в другой.
�� Можно выстраивать цепочки из :not . Тогда выборка будет уменьшаться по порядку исключая элементы, подходящие под условия.
Красим в красный все пункты списка, кроме последнего элемента и кроме тех, у которых есть класс .active :
li:not(:last-child):not(.active) color: red;>li:not(:last-child):not(.active) color: red; >
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� После того, как поддержка этого псевдокласса была внедрена во все браузеры, я стала использовать его повсеместно. Гораздо удобнее написать один селектор, чем два блока кода для такой тривиальной задачи, как сброс последнего отступа или выбор элемента за исключением какого-то класса.
Из последнего: мне нужно было стилизовать все поля ввода, кроме тех, что были скрыты (иногда в форму добавляют скрытые поля, чтобы отправить вместе с данными пользователя служебные данные). Вместо того, чтобы писать составной селектор, выбирая отдельные поля или выдумывать отдельный класс только для тех полей, которые видны или не видны, я написала селектор input : not ( [ hidden = «true» ] ) , и интерпретатор применил нужные мне стили только к тем инпутам, у которых нет атрибута hidden .