在Chrome中浮动LI环绕的链接 [英] Links inside of floated LI wrapping in Chrome
本文介绍了在Chrome中浮动LI环绕的链接的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以,我有以下HTML结构:
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>
其中,样式后在Firefox中生成以下内容:
Which, after styling produces the following in Firefox:
>
,在Webkit中,链接文本包装:
However, in Webkit, the link text wraps:
LI
标记向左浮动,应该随锚的尺寸增大根据需要包装在具有宽度设置的容器内。
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?
推荐答案
添加white-space:nowrap;到链接以避免断线。
和< ul>
元素只能包含< li>
。
Add white-space:nowrap; to the links to avoid break line.
And <ul>
element must only contain <li>
.
这篇关于在Chrome中浮动LI环绕的链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文