ul列表解决最后一个li标签的margin问题

最新推荐文章于 2023-11-10 18:33:16 发布

pengmingdong

最新推荐文章于 2023-11-10 18:33:16 发布

阅读量3.6k

点赞数

分类专栏：前端笔记文章标签： css3 margin

前端笔记专栏收录该内容

37 篇文章 3 订阅

订阅专栏

原文地址：http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html
方法一：运用css3的nth-child(3n)，但是不兼容ie8及以下。

<!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>

方法2：利用负margin值

<!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;margin-left:-10px;}
        .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-left:10px;margin-bottom:10px;}
    </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>

pengmingdong

关注

0
点赞
踩
0

收藏

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

原文地址：http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html 方法一：运用css3的nth-child(3n)，但是不兼容ie8及以下。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>demo</title> <
复制链接

扫一扫