2

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

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

JS 小提琴：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;

}
4

6 回答 6

4

您可以使用nth-child伪选择器在每行放置两个。

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

此选择器将仅针对第 3、5、7、9 等ul li元素。

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

于 2013-04-15T19:39:27.687 回答
1

创建一个具有宽度的容器，然后浮动 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;
}
于 2013-04-15T19:25:17.573 回答
1

将 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;
}
于 2013-04-15T19:34:45.150 回答
0

该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

于 2013-04-15T19:54:49.530 回答
0

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

我从各行的样式中删除了所有边距引用，然后放

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

入式为李。然后将所有共同点从单独的线条样式移到 li 的样式中。

（对：您不必指定每行的边距如何单独计算。）

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

于 2013-04-15T19:31:17.227 回答
0

我会这样做：

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

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

接下来，消除对 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; }
于 2013-04-15T19:24:55.997 回答