html - CSS <li> 标签样式

Question

到目前为止，我正在尝试让我的列表标签每行显示 2x2，我使用边距来正确定位它们。 必须有一种不使用边距的更简单的方法来做到这一点吗？

下面是我使用的代码和一个 jsfiddle，它显示了我到目前为止所获得的内容，公平地说，我对它的样式很满意，只是对我编写样式的方式不满意。我忍不住认为有一种更简单的方法可以做到这一点。

JS fiddle :http://jsfiddle.net/tNQE3/

<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 元素。

这是一个 fiddle :http://jsfiddle.net/8gN8U/1/