CSS解决ul下面最后一个li的margin

Posted 2020-10-07 web_study

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS解决ul下面最后一个li的margin相关的知识，希望对你有一定的参考价值。

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>

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>

以上是关于CSS解决ul下面最后一个li的margin的主要内容，如果未能解决你的问题，请参考以下文章

css 布局怎么移动ul ？

css技巧

关于CSS中的ul与li的问题具体代码如下怎么解决子级li挤父级li

怎么用CSS选择ul里最后一个li里面的a元素

怎么设置ul ,li标签元素横排且居中啊？

获取ul下面最后一个li或ul中有多少个li