2

基本的に私はULリストを持っています

<ul>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
</ul>

リストのスタイルは次のとおりです。

li {
    display:inline-block;
    margin:5px 0 0 8px;
    width:73px;
    overflow:hidden;
}


li a {
    display:block;
    background:url(../images/gtborder.png);
    width:73px;
    height:55px;
}
li:hover {
    background-position:0px -55px;
}

さて、各リスト間のギャップは正確に 8 ピクセルである必要がありますが、ブラウザで表示すると... mroe の次に 8 ピクセルになります。その改行のためです。

すべてのliタグが1行にあれば問題ありませんが、実際にはそうしたくありません。HTMLをそのままにして、CSSを編集して、このスペースがもう存在しないようにする方法はありますか?

4

2 に答える 2

1

さて、リスト項目をinline-blockマークアップ内のこれらの項目間の空白 (つまりインデント) に設定したため、ここで問題が発生しています。したがって、2 つのリスト項目は空白と各リスト項目の左側のマージンで区切られます。

解決策: リスト項目をフロートさせるか、リスト タグ間の空白を削除してください。

幸運を。

于 2010-11-18T20:44:17.367 に答える
1

とった

各liタグの間にスペースがあります - 私はそれを削除しました:

http://jsfiddle.net/j5yDd/1/

元の答え::

また、5px の上余白があるため、スペースは 13 になります。5px の上余白を削除する必要があります。

ええと。これが正確な css であると確信していますか? 書かれているように、上マージンは 5px、左マージンは 8 です。下マージンはまったく表示されません。

http://jsfiddle.net/j5yDd/

于 2010-11-18T20:31:13.517 に答える