0

在一个电子商务网站上，我在具有 4 个替代产品视图的页面上设置了链接（它们是添加到购物篮下方的 4 个小图像）在 iPhone 或 iPad 上，第 4 个图像的右边距没有被删除所以它进入下一行。

基本上每个图像都有 10px 的右边距，然后最后一个具有“end”类的图像的右边距为“0px！important”。

这在网络浏览器中运行良好，但在 iPad / iPhone 上，没有应用 0px 右边距。

我有一种感觉，这将是一个简单的，但我只是看不到它，提前感谢任何帮助。

编辑我已经添加了下面的代码，并且还设置了我遇到问题的页面的精简版本：链接，它是右侧底部的 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 回答