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

小提琴