html – CSS使列表项完全响应

概述我面临着一个奇怪的问题.我有一个无序的图像列表.列表有4个项目.我想将它包含在响应式页面中,我想要的是所有项目都应该有25％的宽度,列表本身应该跨越整个屏幕的宽度.好吧,这一切听起来既简单又直接,但由于一些奇怪的原因,我不能为列表项分配25％的宽度,如果我指定宽度,则只有三个项目容纳在一行中：25％. 如果我将宽度减小到24.4％,则项目符合要求.但是当我调整浏览器大小时,其中一个项目进入第二行时 我面临着一个奇怪的问题.我有一个无序的图像列表.列表有4个项目.我想将它包含在响应式页面中,我想要的是所有项目都应该有25％的宽度,列表本身应该跨越整个屏幕的宽度.好吧,这一切听起来既简单又直接,但由于一些奇怪的原因,我不能为列表项分配25％的宽度,如果我指定宽度,则只有三个项目容纳在一行中：25％.

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

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

<ul >        <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/

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

<ul ><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>

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

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

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

总结

以上是内存溢出为你收集整理的html – CSS使列表项完全响应全部内容，希望文章能够帮你解决html – CSS使列表项完全响应所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。