解决ul里最后一个li的margin问题

最新推荐文章于 2020-06-07 20:07:14 发布

dengwa5523

最新推荐文章于 2020-06-07 20:07:14 发布

阅读量162

点赞数

原文链接：http://www.cnblogs.com/summer323/p/5279967.html

版权

1、运用css3的nth-child(3n)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    *{margin:0;padding:0}
        .box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;}
        .box ul{overflow:hidden;}
        .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-right:10px;margin-bottom:10px;}
        .box ul li:nth-child(3n){margin-right:0;}
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</div>
</body>
</html>

现在流行响应式布局，这种css3解决办法，在响应的时候并不靠谱.可以使用margin负值。

2.使用负margin

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <style>
 7     *{margin:0;padding:0}
 8         .box{width:620px;padding:10px;background:#bbb;border:1px solid #f00;margin:0 auto;}
 9         .box ul{overflow:hidden;margin-left:-10px;}
10         .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-left:10px;margin-bottom:10px;}
11     </style>
12 </head>
13 <body>
14 <div class="box">
15     <ul>
16         <li>1</li>
17         <li>2</li>
18         <li>3</li>
19         <li>4</li>
20         <li>5</li>
21         <li>6</li>
22         <li>7</li>
23         <li>8</li>
24         <li>9</li>
25         <li>10</li>
26         <li>11</li>
27         <li>12</li>
28         <li>13</li>
29     </ul>
30 </div>
31 </body>
32 </html>

转载于:https://www.cnblogs.com/summer323/p/5279967.html

dengwa5523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决ul里最后一个li的margin问题

1、运用css3的nth-child(3n)<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>demo</title> <style> *{margin:0;padding:0}...
复制链接

扫一扫