Chrome not displaying all list items with display:

问题:

So I have an unordered list with 7 items in it, they are displayed as inline and inside of the li there are empty anchor tags (I really need them to be empty and anchor tags). Here's a link http://jsfiddle.net/FTHMf/2/.

Chrome only displays 6 of them, and I wonder why, firefox seems to display all 7.

Also, I don't want to use inline-block for various reasons.

Is there any way to fix this? What causes the problem?

Thank you!

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

回答1:

Chrome is not displaying the first element for whatever reason. Here is a that will not affect your HTML/layout in any way but beats me why is it happening - looks like a bug most definitely.

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

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

回答2:

@user1128245 Use this

.john li {
    float:left;
}