本文介绍了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