Chrome不会使用display：inline显示所有列表项 [英] Chrome not displaying all list items with display:inline

问题描述

所以我有一个无序的列表，其中有7个项目，它们显示为内联和里面有空的锚标签（我真的需要他们是空的和锚标签）。
以下链接 http://jsfiddle.net/FTHMf/2/ 。 p>

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

解决方案

Chrome不显示第一个元素无论什么原因。这里是一个不会以任何方式影响你的HTML /布局，但打败我为什么会发生 - 看起来像一个错误绝对。

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

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

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

解决方案

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/

这篇关于Chrome不会使用display：inline显示所有列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！