Question

如果我将包含四个项目的容器（div）设置为100%，并使元素（li）25%在任何元素上没有边距或填充，不应该每个元素完全适合容器中的一行吗？为什么不这样做，为什么最后一个会跑到下一行呢？

<div>
    <ul>
        <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
        <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
        <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
        <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;    
}

div {
    width: 100%;
}

li {
    display: inline-block;
    list-style: none;
    width: 25%;
}

img {
    width: 100px;
}

Answer 1

链接到小提琴：http://jsfiddle.net/arshadmuhammed/n4e1ncvh/1/

将float:left添加到您的

li {
    display: inline-block;
    list-style: none;
    width: 25%;
    float:left;
}

回答第二个问题：
2）不要给予保证金，而是给边界＆amp;为了获得它们之间的间距，你可以选择盒子大小。

li {
    box-sizing:border-box;/*new*/
    list-style: none;
    width: 25%;
    float:left;
    background:red;
    border:20px solid white;/*new*/
}

Answer 2

正如您所说，当您设置宽度为100％且图像宽度为25％时，为什么最后一张图片会转到下一行，因为您还没有定义图像的位置..添加{{1}你的代码..

Answer 3

由于HTML中的内联块之间存在空格，因此发生了这种情况。删除它们：

<div> <ul> <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li><li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li><li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li><li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li> </ul> </div>

更新了JSfiddle：http://jsfiddle.net/somj9pq2/4/

以响应度的百分比设置元素的宽度

3 个答案: