Html 一行3张图像，在手机中留下空白

以下代码在桌面上运行良好，但在移动设备上，它在右侧留下了一个间隙：

ul{
width:100%;
}

li{
width:33.3333333333333%;
float:left;
}

img{
  width:100%;
}

<ul>
  <li><a href="#"><img src="img/men.jpg"/></a></li>
  <li><a href="#"><img src="img/women.jpg"/></a></li>
  <li><a href="#"><img src="img/kids.jpg"/></a></li>
</ul>

ul{
宽度：100%；
}
李{
宽度：33.3333%；
浮动：左；
}
img{
宽度：100%；
}

---

我也尝试过display:table，但这会留下更多的空白：（有什么想法吗？

你应该设置

的宽度，使它们加起来等于100。你的加起来等于

99.999999%

。前两个样式使用

33%

，最后一个样式使用

34%
你试过在css中的img标签上使用
display:block；
，其他东西可能是边距和填充g在ul和li标签上未设置为0

查看附带的JSFIDLE，看看这是否有助于解决问题

不知道是否重要，但是您的图像标签没有正确关闭
vs
还有，差距有多大？最后一张图像右侧的差距很小，这不是问题，我只是快速键入。您在手机上使用的浏览器是什么？不要使用那样的第三个。两个是33%，一个是34%，这样您就可以100%可靠地相加。b但这样一来，宽度为34%的图像比其他两个图像的高度更高…@user1937021将其设置为
33.333%
，
33.333%
和
33.334%
。只需确保它加起来等于
100%
。没有人会注意到
0.001%
的差异。仍然不相信你还能看到一个小小的空间