встроенный список li: last-child: after {content: ","} Можно ли избавиться от дополнительного пространства, которое оно создает? - PullRequest
Новая
       13

встроенный список li: last-child: after {content: ","} Можно ли избавиться от дополнительного пространства, которое оно создает?

2 голосов
/ 10 августа 2010

http://forumgallery.rollinleonard.com/artists.php

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

Это делаетнет смысла!

Вот соответствующая часть моего CSS 

.artistlist {
    margin: 0px;
    padding: 0;
    }

li.artistlist {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: .75em;
    line-height: 1.5em;
    word-spacing: 1px;
    }
li.artistlist:after {
    content:", ";
    }
.artistlist li:last-child:after {
    content:"";
    }
ul li{
    margin:0;
}

Ответы [ 2 ]

3 голосов
/ 29 ноября 2011

Для специальных символов, таких как пробел, вы должны использовать Юникод в контенте.Попробуйте это: 

li.artistlist:after {
    content:",\00a0";
}
3 голосов
/ 10 августа 2010

Я сделал небольшую демонстрацию с меньшим количеством CSS-кода, который отображается без пробела перед запятой.Протестировано в Chrome и Firefox на Mac.

Посмотрел обновленную страницу и обнаружил проблему с ней.Подробнее о возможных ошибках в пробелах в разных браузерах можно прочитать здесь: http://www.42inc.com/~estephen/htmlner/whitespacebugs.html

Ваш HTML выглядит следующим образом: 

<li class="artistlist"> 
     <a href="#" onMouseOver="ShowDiv('artist_2_1');ShowDiv('artist_2_2');ShowDiv('artist_2_3'); return false;" onMouseOut="HideDiv('artist_2_1'); HideDiv('artist_2_2'); HideDiv('artist_2_3'); return false;" class="inlinelistlink display">Davis Cone</a> 
        </li>

Попробуйте удалить пробел между вашими тегами, и он будет хорошо выглядеть: 

<li class="artistlist"><a href="#"  onMouseOver="ShowDiv('artist_2_1');ShowDiv('artist_2_2');ShowDiv('artist_2_3'); return false;" onMouseOut="HideDiv('artist_2_1'); HideDiv('artist_2_2'); HideDiv('artist_2_3'); return false;" class="inlinelistlink display">Davis Cone</a></li>
...