Question

So, I have the following HTML structure:

<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>

Which, after styling produces the following in Firefox:

However, in Webkit, the link text wraps:

The LI tags are floated left and should grow with the size of anchor inside them and then wrap as needed inside the container which has a width set. Any ideas why the links are wrapping in Webkit?

Answer 1

Add white-space:nowrap; to the links to avoid break line.
And <ul> element must only contain <li>.