Как убрать маржу из каждого элемента, который является последним элементом в строке?

Question

Как убрать маржу из каждого <li> последнего столбца? Я прошу каждый <li>, который идет в последнем столбце, когда у меня есть 9 <li> и 3 в каждом столбце. Я не прошу просто удалить margin из последнего элемента последнего <li> из <ul>, который я уже знаю :last-child { margin-right: 0 }

А если экран маленький или пользователь изменяет размер браузера, то 3 + 3 + 3 может стать 4 + 5 или 2 + 2 + 2 + 2 + 1

Таким образом, в любом состоянии любой <li> (это может быть один или более чем один), который находится в последнем столбце. Я хочу удалить margin-right.

Все ли в пределах одной ул

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
   <li>item 6</li>
   <li>item 7</li>
   <li>item 8</li>
   <li>item 9</li>
</ul>

Я добавил jsfiddle здесь: http://jsfiddle.net/GnUjA/1/

Answer 1

Удаление или добавление стилей на конкретном элементе каждой строки невозможно выполнить с помощью чистого CSS, если вы не знаете точно, сколько элементов имеется в строке (с помощью семейства селекторов nth-child()).

Отрицательные поля

Что вы можете сделать в случае полей, это замаскировать их, добавив отрицательные поля в родительский элемент.Это создаст иллюзию того, что ваши дочерние элементы помещаются внутри родительского элемента, при этом расстояние между отдельными элементами все еще остается:

http://codepen.io/cimmanon/pen/dwbHi

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

Разделение поля пополам и установка его наОбе стороны (margin-left: 5px; margin-right: 5px) могут давать лучшие результаты, чем одно поле с одной стороны (margin-right: 10px), особенно если вашему дизайну необходимо работать с направлениями LRT и RTL.

Примечание: для этого может потребоваться добавление overflow-x: hidden к элементу-предку, чтобы предотвратить горизонтальную прокрутку, в зависимости от того, насколько близко контейнерный элемент расположен к краю области просмотра.

Медиа-запросы

Если вы можетеразумно предсказать, сколько элементов будет в строке, вы можете использовать медиазапросы для нацеливания на последний элемент в строке с помощью nth-child().Это значительно более многословно, чем использование отрицательных полей, но это позволит вам сделать другие корректировки стиля:

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}
/* etc. */

Answer 2

Я считаю, что это то, что вы хотите (JQuery):

http://jsfiddle.net/PKstQ/

Если эта скрипка демонстрирует то, что вы хотите сделать (за исключением поля вместо цвета фона), вы не можете сделать это с помощью CSS. Вам понадобится JavaScript. Если jquery является приемлемым, то опубликованную скрипку можно легко изменить. Было бы относительно просто превратить его в чистый JS.

Answer 3

Для меня имеет больше смысла дать левой стороне ul отступы, которые выравнивают его.

Я добавил: ul { padding-left: 10px; } - http://jsfiddle.net/GnUjA/30/

Зависит от необходимости, но то же самое действительно идет к вершине:

ul { padding-top: 10px; padding-left: 10px; } - http://jsfiddle.net/GnUjA/31/

Answer 4

Изменить: Ответ переписан после просмотра образца HTML

То, что вы хотите сделать, невозможно с помощью CSS. Причина в том, что вы хотите стилизовать элементы на основе отрендеренного макета , который CSS позволяет работать только на основе структуры документа .

Нечто подобное возможно только с помощью сценариев на стороне клиента (Javascript), которые могут запрашивать визуализированные свойства макета и действовать соответствующим образом.