Chrome不顯示所有列表中的項目：inline

所以我有一個無序的列表，其中有7個項目，它們顯示爲內聯和李的裏面有空錨標記（我真的需要它們是空的和錨標籤）。這是鏈接http://jsfiddle.net/FTHMf/2/。Chrome不顯示所有列表中的項目：inline

鉻只顯示其中的6，我不知道爲什麼，火狐似乎顯示所有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; 
}

來源

2013-02-23 user1128245

我看到7個項目上給出小提琴 - 使用最新的Chrome。 – MarcinJuraszek 2013-02-23 08:44:22

對不起，我現在編輯了鏈接。這是顯示器：內聯塊解決方案。現在它是內聯的一個不起作用 – user1128245 2013-02-23 08:45:38

@ user1128245使用此

.john li { 
    float:left; 
}

來源

2013-02-23 08:55:14 snowp

我不想使用浮動，正如我所說的，問題是可以解決的，但我只是好奇爲什麼chrome會這樣做，所以我可以避免它的問題未來。 – user1128245 2013-02-23 08:59:58

瀏覽器無法顯示不論什麼原因，第一個元素。這是一個不會以任何方式影響你的HTML /佈局，但會打敗我爲什麼會發生 - 看起來像一個絕對的錯誤。

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

來源

2013-02-23 09:26:39

Chrome不顯示所有列表中的項目：inline

回答

相關問題