3

画像を並べてリストを作成しようとしています。それぞれにリンクとホバー時の効果があります。画像がどこかから 142 ピクセルの左マージンを作成することを除いて、すべて正常に動作します。

マージンは 0 ( として複数回宣言されていますmargin: 0) で、Firebug (Firefox デバッグ ツール) を使用すると、画像の左マージンが 142 ピクセルであることがわかります。

コードは次のとおりです (もちろん短縮されています)。

<div id="">
    <ul>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
    </ul>
</div>

そしてCSS：

# {
    height: 185px;
    padding: 16px 0px;
    position: relative;
    width: 100%;
}

# ul {
    list-style: none;
    width: 951px;
}

# li {
    background: black; /*just to verify if the margin was on the LI or IMG*/
    float: left;
    height: 185px;
    margin: 0 16px;
    width: 285px;
}

# img {
    position: absolute;
}

# img.bloom {
    display: none;
    z-index: 1;
}

「花」の画像は、ホバー効果の一部です。ご覧のとおり、NOWHERE は「余白」が設定されており、ここでも CSS のどこにもありません。リンクで見ることができます: http://ranierialthoff.com.br/elite/フッターの直前の画像。

4

2 に答える 2

3

左余白ではなく、画像の位置です。あなたの問題は、ブラウザにどこに配置するかを伝えずに、画像を絶対に配置していることです。スタイルに追加top: 0; left: 0;または類似する必要があります。#unidades img

于 2013-03-01T03:25:45.093 に答える
3

text-align:center私はあなたの要素を参照してください#unidades li。センターになりimgます。

に変更してleft問題を解決できます。

それらを一元化したい場合。ただ外しposition:absoluteて#unidades imgじっとしてtext-align:centerいてください。

于 2013-03-01T03:30:29.497 に答える