4

したがって、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;
}
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 に答える