HTML / CSS使列表成行,每行3个盒子?
发布时间:2020-12-30 14:26:05 所属栏目:资源 来源:网络整理
导读:ul liitem1/li liitem1/li liitem1/li liitem1/li liitem1/li liitem1/li/ul 假设每个盒子的宽度为150px,因此每行的总宽度为450px. 我要做的是,自动使列表每行只允许3个框(列表元素),而不是让它在彼此之下. 我尝试了一些东西,而不只是在尝试之前询问! 有
<ul> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> <li>item1</li> </ul> 假设每个盒子的宽度为150px,因此每行的总宽度为450px. 我尝试了一些东西,而不只是在尝试之前询问! 有我的尝试: <div class="container"> <ul> <li>hreyyy</li> <li>hreyyy</li> <li>hreyyy</li> <li>hreyyy</li> <li>hreyyy</li> <li>hreyyy</li> </ul> </div> .container { width: 450px; } .container ul li { width: 150px; height: 100px; background-color: red; float: left; } .container ul { display: inline; } 结果: img http://gyazo.com/fc8367ed762c25b29abb94a1e31e4da4.png 它“不是我想要的,为什么? 是否有插件可以让生活更轻松? 解决方法您无需将UL设置为显示为内联对象.相反,做这样的事情:.container { width: 450px; } .container ul { padding: 0; /* remove default padding and all margins! */ margin: 0; list-style-type: none; /* remove the ? */ } .container ul li { width: 150px; height: 100px; background-color: red; float: left; } 结果:http://jsfiddle.net/f896G/ (编辑:宁德站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |