链接在Chrome中的浮动LI包装内部

时间:2011-05-26 21:39:21

标签: html css webkit

所以,我有以下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中产生以下内容:

enter image description here

但是,在Webkit中,链接文本包装:

enter image description here

LI标签向左浮动,并且应该以其中的锚点大小增长,然后根据需要在具有宽度设置的容器内进行包装。链接在Webkit中包装的任何想法?

2 个答案:

答案 0 :(得分:4)

添加空格:nowrap;到链接,以避免断线。 <ul>元素必须只包含<li>

答案 1 :(得分:3)

在没有看到你的CSS的情况下猜测,但试试这个:

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

这应该阻止文本包装。


正如已经提到的,将div作为ul的直接子项是无效的。您应该将其更改为<li class="column full">。您可能还需要调整CSS中的一些选择器。