Question

FireFox似乎将列表项中的任何单词放在不同的行中，如下所示： http://a.flatsi.es/projects/7temwk/images/j7tjrt
但在其他一切事物中，这就是我想要的，就像这样 http://a.flatsi.es/projects/7temwk/images/9766kh

正确方向上的一点是超级的。

HTML

<div class="singlenav">
<ul>
<li><a href="/v2">Home</a></li>
<li><a href="/v2/?p=17">About</a></li>
<li><a href="/v2/?p=14">Information</a></li>
<li><a href="/v2/?p=11">Study Skills</a></li>
<li><a href="/v2/?p=8">Discuss</a></li>
<li><a href="/v2/?p=5">Contact</a></li>
</ul>
</div>

CSS

.quicklinks{
width: 100%;
font: bold 20px 'Helvetica',sans-serif;
color: #333;
text-align: left;
margin: 70px 0 0 0;
display:inline-block;
}

.quicklinks li{
white-space: nowrap; 
}


.quicklinks li a{
color: #333;
text-decoration: none;
padding: 10px;
margin: -10px;
}

Answer 1

由于我们没有进行HTML测试，所以我将尝试利用“心灵力量”。试试这个：

li { white-space: nowrap; }

编辑：针对Fx 15上的测试用例

Answer 2

也许您可以尝试添加一个高度设置，手动强制它不会超过一定高度。

例如：

身高：100px;

Answer 3

我认为li a中的负边距意味着a内部想要比它的盒子更大，因此如果可以包装那么包装这个词。我从来没有看到平行边上的负边距相等，但如果这实际上缩小了一个元素我可能错了。

Firefox显示列表错误

3 个答案: