Question

我正在尝试让我的列表标签每行显示2x2到目前为止我使用边距以便正确定位它我想要的方式。在不使用边距的情况下，这是一种更简单的方法吗？

下面是我使用过的代码和一个jsfiddle，它显示了我到目前为止所得到的内容，公平地说我很高兴它的样式对我编写样式的方式不满意。我不禁想到这是一种更简单的方法。

<section id="maincontent">
<div id="wrap">
    <ul>
<li id="games" class="nav"><a href="#">Games</a></li>
    <li id="music" class="nav"><a href="#">Music</a></li>
    <li id="movies" class="nav"><a href="#">Movies</a></li>
    <li id="tv" class="nav"><a href="#">TV</a></li>  
    <li id="sport" class="nav"><a href="#">Sport</a></li>      
    </ul>
</div>
</section>

#wrap ul {
padding:40px 40px 40px 100px;   
}

#wrap li {
border: 1px solid #333333;
border-radius: 15px;
height:200px;
width:300px;
background:#ebebeb;
padding: 10px 0px 0px 20px;
text-align:center;
}

#wrap li#games {
 margin: 0px 0px 0px 30px;
 background-image:url(../img/controller.png);
 background-size: 30px 30px;
 background-repeat:no-repeat;
 background-position: 80px;
 padding: 10px 0 0 34px; 
}


#wrap li#music {
margin: -210px 0px 0px 400px;
 background-image:url(../img/music.png);
 background-position: 80px;
 background-size: 30px 30px;
 background-repeat:no-repeat;  
padding: 10px 0 0 34px;
}

#wrap li#movies {
background-image:url(../img/video.png);
 background-size: 30px 30px;
 background-position: 80px;
 background-repeat:no-repeat;  
padding: 10px 0 0 34px;
margin: 20px 0px 0px 30px;
}

#wrap li#tv {
 background-image:url(../img/tv.png);
 background-size: 30px 30px;
 background-position: 80px;
 background-repeat:no-repeat;  
padding: 10px 0 0 34px;
margin: -210px 0px 0px 400px;
}

#wrap li#sport {
background-image:url(../img/sport.png);
 background-size: 30px 30px;
 background-position: 80px;
 background-repeat:no-repeat;  
padding: 10px 0 0 34px;
margin: 20px 0px 0px 30px;

}

Answer 1

您可以使用nth-child伪选择器在每一行上定位两个。

ul li:nth-child(2n+3) {
   clear:both;
}

此选择器仅定位第3，第5，第7，第9等。ul li元素。

这是一个小提琴：http://jsfiddle.net/8gN8U/1/

Answer 2

创建一个宽度的容器，然后浮动li的

http://jsfiddle.net/wVmZc/

 <div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>        
    </ul>   
</div>


div {
    width: 450px;
    border: 1px solid red;
    overflow: hidden;   
}
ul {
    list-style: none;
}
li {
    float: left;
    width: 150px;
    height: 100px;
    border: 1px solid lime;
}

Answer 3

将display：inline-block设置为li，并指定ul的宽度。

http://jsfiddle.net/65YuK/

ul {
    width: 650px;
}

ul li {
    border: 1px solid #333333;
    border-radius: 15px;
    height: 200px;
    width: 300px;
    background: #ebebeb;
    text-align:center;
    display: inline-block;
    margin: 10px 10px;
}

Answer 4

我会这样做：

http://jsfiddle.net/tNQE3/12/

首先，UL可能不是您拍摄的布局的最佳选择。我会做一个简单的div网格，并将单元格设置为类似于LIs的样式。

接下来，消除过度使用ID，而是使用类来定位元素，而不是单独定位每个元素。

<强> HTML：

        <div class="row">
            <div class="col">
                <a href="#">Games</a>
            </div>
            <div class="col">
                <a href="#">Music</a>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <a href="#">Movies</a>
            </div>
            <div class="col">
                <a href="#">Tv</a>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <a href="#">Sport</a>
            </div>
        </div>

    </div>
</section>

<强> CSS：

   #wrap {
        padding:40px 40px 40px 100px;   
    }

    .row { width:6400px; overflow:hidden; margin:0 0 20px 0; }
    .col {   
        width:300px;
        height:200px;
        margin:0 20px 0 0; 
        padding: 10px;

        float:left; 

        border: 1px solid #333333;
        border-radius: 15px;

        text-align:center;

        background:#ebebeb url(../img/controller.png) no-repeat;
    }
    .col:last-child { margin:0; }

Answer 5

这个怎么样？ http://jsfiddle.net/briggs_w/tNQE3/14/

我从各个样式的样式中删除了所有边距引用，并放入

margin-left:30px;
margin-right:20px;

进入李的风格。然后将所有共同点从各个线条样式移动到li的样式。

（右：您不必指定这些边距如何为每一行单独计算。）

我会进一步将背景图像从样式移动到单独的行，可能在div中，因为我不认为它真的属于样式文件，但你不必这样做。

Answer 6

columns属性完全符合您的要求，无需修改标记。只需根据需要在li上添加边距：

http://jsfiddle.net/tNQE3/16/

#wrap ul {
    padding:40px 40px 40px 100px;
    -webkit-columns: 320px;
    -moz-columns: 320px;
    columns: 320px;
}

#wrap li {
    border: 1px solid #333333;
    border-radius: 15px;
    height:200px;
    width:300px;
    background:#ebebeb;
    padding: 10px 0px 0px 20px;
    text-align:center;
    background-size: 30px 30px;
    background-position: 80px;
    background-repeat:no-repeat;  
    padding: 10px 0 0 34px;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

#wrap li#games {
    background-image:url(../img/controller.png);
}


#wrap li#music {
     background-image:url(../img/music.png);
}

#wrap li#movies {
    background-image:url(../img/video.png);
}

#wrap li#tv {
    background-image:url(../img/tv.png);
}

#wrap li#sport {
    background-image:url(../img/sport.png);
}

http://caniuse.com/#feat=multicolumn

CSS <li>标签样式</li>

6 个答案: