html – Chrome不显示所有带有display的列表项：inline

2023年2月15日 214次阅读

所以我有一个包含7个项目的无序列表,它们显示为内联和li内部有空锚标签(我真的需要它们为空和锚标签).

这是一个链接
http://jsfiddle.net/FTHMf/2/.

Chrome只显示其中的6个,我想知道为什么,firefox似乎全部显示7个.

另外,我不想出于各种原因使用内联块.

有没有什么办法解决这一问题？是什么原因造成的？

谢谢！

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

最佳答案 无论出于何种原因,Chrome都不会显示第一个元素.这是一个不会以任何方式影响你的HTML /布局,但打败我为什么会发生 – 看起来像一个绝对的错误.

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

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

点赞