Question

我面临一个奇怪的问题。我有一个无序的图像列表。列表有4个项目。我想将它包含在响应式页面中，我想要的是所有项目都应该有25％的宽度，列表本身应该跨越整个屏幕的宽度。好吧，这一切听起来简单直接，但由于一些奇怪的原因，我不能为列表项分配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

对于inline-bock元素，浏览器会将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

Fiddle

CSS使列表项完全响应

2 个答案: