Почему это так: после того, как элемент подвергается разрывам строк? - PullRequest
Новая
       32

Почему это так: после того, как элемент подвергается разрывам строк?

7 голосов
/ 12 июля 2011

У меня есть простое меню, закодированное как это 

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a></li>
    <li><a href="#">Islands</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

, которое выглядит так enter image description here

Маленькие точки между каждым пунктом меню создаются с использованием псевдо: afterэлемент.Все работает нормально, но мне также нужны подменю, которые будут вложенными списками.

Проблема в том, что, когда я добавляю разрыв строки в меню, как это 

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Islands</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

Я получаюэтот результат в Safari & Chrome (но не в Firefox) ... enter image description here

Мне кажется, что webkit рассматривает пробелы как 'pre'.CSS для элемента: after выглядит следующим образом: 

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;
}

Я также пытался установить white-space: normal/nowrap для элементов ul, li и: after, которые ни на что не влияют.

Может кто-нибудь увидеть, где я ошибаюсь, или это проблема с Webkit / Firefox?

ОБНОВЛЕНИЕ

Я создал демо на http://jsfiddle.net/zmVbH/

1 Ответ

5 голосов
/ 12 июля 2011

Проблема в том, что разрыв строки - это пробел, из-за которого плавающий контент пропускает строку.Проблема может быть воспроизведена путем добавления одного пробела между </a> и </li>.Попробуйте сделать вставленный контент display:inline-block вместо плавающего. 

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    display:inline-block;
    text-align: center;
    border: rgba(0,0,0,0.25) 1px solid;
    white-space: normal;        
}

Обновлено JSFiddle .

UPDATE BY OP

Да, встроенный блокисправляет это, но это не так просто, так как inline-block имеет некоторую нестабильную поддержку браузера. 

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;

    /* FIX */
    display:-moz-inline-stack; /* For older versions of Firefox */ 
    display:inline-block; /* Anything that supports inline-block */

    /* IE FIX */
    zoom:1;
    *display:inline; 
}
...