0

私がセットアップした e コマース Web サイトで、4 つの代替製品ビュー (カートに追加の下にある 4 つの小さな画像) があるページにリンクを設定しました。iPhone または iPad で、4 番目の画像の右マージンが削除されていません。したがって、次の行に進みます。

基本的に、各画像には 10px の右マージンがあり、「end」のクラスを持つ最後の画像には、「0px !important」の右マージンがあります。

これは Web ブラウザーでは正常に機能しますが、iPad / iPhone では 0px の右マージンが適用されません。

これは簡単なものになると思いますが、見えないだけです。事前に助けてくれてありがとう。

EDIT以下のコードを追加し、問題のあるページの削除バージョンもセットアップしました: link、右側の下部にある 4 つの小さな画像です。

以下は、画像の HTML です。

<div class="image-additional">
    <img alt="" title="" src="larchblue-cr-55x55.jpg" class="thumb ">
    <img alt="" title="" src="larchgreen-cr-55x55.jpg" class="thumb ">
    <img alt="" title="" src="larchpink-cr-55x55.jpg" class="thumb ">
    <img alt="" title="" src="larchyellow-cr-55x55.jpg" class="thumb end">
</div>

CSS は次のとおりです。

.image-additional {
    width: 268px;
    margin-top: 13px;
    clear: both;
    position: absolute;
    bottom: 0;
    overflow: hidden;
}

.image-additional img {
    border: 1px solid #E7E7E7;
    margin-right: 10px;
}

.image-additional img.end, .image-additional img:last-child { 
        margin-right: 0px !important;
}
4

1 に答える 1

0

モバイルターゲットに：last-child疑似要素を使用してみてください。

.img:last-child {
  margin-right: 0px;
}

注：IE8以下を除くすべての場所で機能します。

于 2012-04-17T08:24:37.547 に答える