本文介绍了HTML / CSS列表在行中,每行3个框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
< ul>
< li> item1< / li>
< li> item1< / li>
< li> item1< / li>
< li> item1< / li>
< li> item1< / li>
< li> item1< / li>
< / ul>
假设每个框都是 150px
因此每行的总宽度为 450px
。
我想做的是,自动使列表只允许每行3个框(列表元素),而不是让它在彼此之下。
有我的尝试:
< 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;
}
结果:
它不能像我想要的那样工作,为什么?
有没有插件可以使生活更轻松?
您不需要将UL设置为显示为内联对象。相反,做这样的事情:
.container {
width:450px;
}
.container ul {
padding:0; / *删除默认填充和所有边距! * /
margin:0;
list-style-type:none; / * remove the * * /
}
.container ul li {
width:150px;
height:100px;
background-color:red;
float:left;
}
结果:
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
Let's say each box is 150px
wide, so total width per row is 450px
.What I am trying to do is, automatically make the list allow only 3 boxes (list elements) per row, and not make it go under each other.
I've tried something, and not just asking before trying!
There's my attempt:
<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;
}
Result:
It' doesn't function as I wanted, why?
Is there a plugin for it that makes life easier?
解决方案
You don't need to set the UL to display as an inline object. Instead, do something like this:
.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;
}
Result: http://jsfiddle.net/f896G/
这篇关于HTML / CSS列表在行中,每行3个框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
11-01 10:46