html - 连续 3 张图像在移动设备中留下空白

Question

以下代码在桌面上运行良好，但在移动设备上却在右侧留下了空白：

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>

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

Answer 1

您是否尝试过display: block;在 css 中的 img 标签上使用，其他可能是 ul 和 li 标签上的边距和填充未设置为 0。

看看附加的 jsfiddle，看看它是否能帮助你解决问题。

http://jsfiddle.net/djy6V/

Answer 2

您应该设置 的宽度，<li>使它们加起来为 100。您的加起来为99.9999999%。样式前两个使用33%和最后一个使用34%。