HTML / CSS列表在行中，每行3个框？ [英] HTML/CSS Making a list be in rows, 3 boxes per row?

问题描述

 < 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; 
} 
  

结果：http://jsfiddle.net/f896G/

<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个框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！