CSS使列表项完全响应

Question

我面临着一个奇怪的问题。 我有一个无序的图像列表。 列表有4个项目。 我想将它包含在响应式页面中，我想要的是所有项目都应该有25％的宽度，列表本身应该跨越整个屏幕的宽度。 好吧，这一切听起来既简单又直接，但由于一些奇怪的原因，我不能为列表项分配25％的宽度，如果我指定width:25% ，则只有三个项目容纳在一行中width:25% 。

如果我将宽度减小到24.4%则项目符合要求。 但是当我调整浏览器大小时，其中一个项目进入第二行时再次奇怪。

我正在使用Google Chrome。 这是HTML：

<ul class="imgs">
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
        <li>dddd</li>

        </ul>

这是CSS：

.imgs {
width: 100%;
list-style: none;
margin: auto;
    padding:0px;
}
.imgs li {
width: 24.4%;
margin: 0px !important;
padding: 0px !important;
display: inline-block;
}

这里是小提琴演示： http ： //jsfiddle.net/7HXw7/2/

Answer 1

使用内联块元素，浏览器会将li的空间解释为实际空间，这就是为什么元素没有排列的原因。 如果你只是删除空格，它就会排成一行。 看代码：

<ul class="imgs"><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>

或者小提琴，这里： http ： //jsfiddle.net/dgvc9/

或者，如果你觉得这很烦人，你可以制作li的块元素并将它们向左浮动。

看另一个小提琴： http ： //jsfiddle.net/8Gxvd/

Answer 2

尝试添加：

float: left;

到.imgs li

小提琴