Как убрать маржу из последнего li в чистом CSS с поддержкой IE 6?

Question

В этом состоянии можно не применять margin-right к последнему li.

Мне нужен чистый способ CSS и поддержка в IE6 и 7 также и без изменения HTML ,Есть ли способ достичь этого.

ul li {display:inline;margin-right:10px}

<ul id="nav">
    <li><a href="#nowhere" >Lorem</a></li>
    <li><a href="#nowhere" >Aliquam</a></li>
    <li><a href="#nowhere" >Morbi</a></li>
    <li><a href="#nowhere" >Praesent</a></li>
    <li><a href="#nowhere" >Pellentesque</a></li>
</ul>

Answer 1

Вы можете использовать IE CSS выражения для достижения этой цели.

ul#nav li {
    margin-right: 10px;
    /* for IE only: */
    margin-right: expression(this.nextSibling == null ? '0' : '10px' );
}

/* for standards browsers: */
ul#nav li:last-child {
    margin-right: 0;
}

Протестировано и работает в IE7. У меня нет доступа к IE6, но он должен работать так же.

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

Answer 2

Вы можете поставить отрицательное нижнее поле на теге. Я даже не знаю, сработает ли это, но стоит попробовать.

Answer 3

Обычно я бы посоветовал использовать селектор :last-child, но IE 6 и 7 не поддерживают это.

Вы можете добавить класс к последнему элементу li и применить к нему стиль, подобный margin-right: 0.

Без изменения HTML я не знаю ни одного чистого CSS способа заставить это работать в IE 6 или 7.

Answer 4

Дайте последнему <li> класс, а затем примените margin-right: 0px к классу.

Существует псевдокласс :last-child в CSS3, но не будет работать в IE 6 или 7.