4

所以我有一个包含 7 个项目的无序列表，它们显示为内联，并且 li 内部有空的锚标签（我真的需要它们是空的和锚标签）。这是一个链接http://jsfiddle.net/FTHMf/2/。

Chrome 只显示其中的 6 个，我想知道为什么，Firefox 似乎显示所有 7 个。

另外，出于各种原因，我不想使用 inline-block 。

有没有什么办法解决这一问题？是什么导致了问题？

谢谢！

HTML

<ul class="john">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

CSS

.john {
    width:100%;
    text-align:center;
}
.john li {
    display:inline;
}
.john li a {
    background-color:green;
    line-height:0px;
    font-size:0px;
    padding:6px;
    margin:0px 2px 0px 2px;
}
4

2 回答 2

2

无论出于何种原因，Chrome 都没有显示第一个元素。这是一个不会以任何方式影响您的 HTML/布局，但让我知道为什么会发生的问题 - 看起来绝对是一个错误。

.john li:first-child a:after { position: absolute; content: ""; }

http://jsfiddle.net/chrisdanek/xW2e2/

于 2013-02-23T09:26:39.050 回答
0

@user1128245 使用这个

.john li {
    float:left;
}
于 2013-02-23T08:55:14.000 回答