Блог

У меня есть встроенный список с элементами неизвестной ширины, и я хочу, чтобы последний элемент имел другой цвет фона, чем остальные, и занимал все оставшееся пространство справа.

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

В качестве примера, мой HTML:

 <div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li class="last">item 4</li>
    </ul>
</div>
 

и для CSS я попытался:

 background: linear-gradient(to right, #fff 70%, red 30%);
 

в div, но поскольку сайт должен быть отзывчивым, проценты на самом деле работают не так, как мне нужно, они либо недостаточно покрывают, либо перекрывают предыдущий элемент при изменении размера экрана.

Есть ли другой CSS-способ сделать это?

Вот один из способов сделать это, используя комбинацию таблиц CSS, псевдоэлемента и абсолютного позиционирования.

Для следующего HTML:

 <div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li class="last">item 4</li>
    </ul>
</div>
 

примените следующий CSS:

 div {
    border: 1px dotted gray;
    position: relative;
    overflow: hidden;
}
div ul {
    display: table;
    margin: 0 auto;
    padding: 0;
}
div ul li {
    padding: 10px;
    margin: 0;
    display: table-cell;
    list-style-type: none;
    border: 1px dashed blue;
}
div ul li.last {
}
div ul li.last:before {
    content: 'a0'; /* a0 is hex code for a non-breaking space */
    z-index: -1;
    background-color: red;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin-left: -10px;
}
 

Чтобы получить ширину для элементов списка, применитесь display: table к ul элементу, который вы можете центрировать с помощью using margin: 0 auto , поскольку таблицы являются элементами уровня блока.

Применить display: table-cell к li элементам и, при необходимости, применить некоторые отступы.

Чтобы получить красный фон, примените :before псевдоэлемент li.last и расположите его абсолютно, установив top: 0 и используя height: 100% в соответствии с высотой из div оберточного блока (который должен position: relative установить систему отсчета для абсолютного позиционирования.

Ширина 100% для псевдоэлемента вызовет условие переполнения, но вы можете позаботиться об этом, используя overflow: hidden on div .

Если вы применяете горизонтальное заполнение к li , вам нужно будет компенсировать отрицательное левое поле, чтобы цвет фона совпадал с краем блока ячейки таблицы.

Наконец, чтобы заставить фоновый псевдоэлемент располагаться позади текста, set z-index: -1 или некоторого подходящего значения в зависимости от того, какие другие компоненты находятся на вашей странице.

Смотрите демонстрацию: http://jsfiddle.net/audetwebdesign/EruT7 /

В Firefox результаты выглядят так:

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

 div ul {list-style: none;
    margin: 0;
    padding: 0
}
div ul li {
    float: left;
    width: 100px;
    background: white
}
div ul li:last-child {
    float: none;
    width: auto;
    background-color: red
}
 

http://jsfiddle.net/blackbiron/X4tTw/

проверьте это

http://www.w3schools.com/cssref/sel_last-child.asp

этот селектор css очень полезен в этих случаях

итак, вы можете сказать что-то вроде:

 div ul li:last-child{
    /*things for extend the tag area*/
    padding: 5px;
    background-color: #555;
}
 

и если вы хотите больше, проверьте всю ссылку

http://www.w3schools.com/css/css_pseudo_classes.asp

Gl 🙂