Блог

Итак, у меня есть следующая структура HTML:

 <div id="category-filter">
    <div class="column full">
        <ul class="float-clear" id="category-filter">
            <li><a href="/learn" data-category_id="">All Categories</a></li>
            <li><a href="/learn/C3" data-category_id="3">Educator Workshops</a></li>
            <li><a href="/learn/C1" data-category_id="1">Exhibitions</a></li>
            <li><a href="/learn/C5" data-category_id="5">Family Activities</a></li>
            <li><a href="/learn/C4" data-category_id="4">Films</a></li>
            <li><a href="/learn/C6" data-category_id="6">Lectures   Gallery Talks</a></li>
            <li><a href="/learn/C8" data-category_id="8">Music</a></li>
            <li><a href="/learn/C9" data-category_id="9">Other Activities</a></li>
            <li><a href="/learn/C7" data-category_id="7">Tours</a></li>
            <li><a href="/learn/C2" data-category_id="2">Workshops</a></li>
        </ul>
    </div>
</div>
  

Который после стилизации выдает следующее в Firefox:

Однако в Webkit текст ссылки переносится:

LI Теги перемещаются влево и должны увеличиваться с размером якоря внутри них, а затем переноситься по мере необходимости внутри контейнера с установленной шириной. Есть идеи, почему ссылки переносятся в Webkit?

Добавьте пробел:nowrap; к ссылкам, чтобы избежать разрыва строки. И <ul> элемент должен содержать только <li> .

Это догадки без просмотра вашего CSS, но попробуйте это:

 #category-filter a {
    white-space: nowrap
}
  

Это должно остановить перенос текста.

И, как уже упоминалось, недопустимо иметь a div в качестве прямого дочернего элемента a ul . Вы должны изменить это на <li class="column full"> . Возможно, вам также придется настроить некоторые селекторы в вашем CSS.