在 iPad / iPhone 上删除 CSS 边距答案

【问题标题】：Removing CSS Margin on iPad / iPhone在 iPad / iPhone 上删除 CSS 边距
【发布时间】：2012-04-17 08:16:44
【问题描述】：

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

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

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

我觉得这将是一个简单的过程，但我看不到它，提前感谢您的帮助。

编辑我添加了下面的代码，并且还设置了我遇到问题的页面的精简版本：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;
}

【问题讨论】：

你需要提供一个简化的 HTML 和 CSS 来重复这个问题，否则我们都会猜测。
我提供了一些示例代码和一个有问题的实时页面，我仍然没有在这方面取得任何进展，我尝试了@Alkaline 解决方案，但它不起作用。

标签： iphone css ipad margin

【解决方案1】：

尝试为您的移动目标使用 :last-child 伪元素。

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

注意：除 IE8 及以下版本外，它适用于任何地方。

【讨论】：