zoukankan html css js c++ java

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>

查看全文

相关阅读:
快速开发一个自己的微信小程序
 ES6系列汇总
 数组、Set对象的互相转换
 CORS 跨域
 模板引擎之hogan.js
Flex 布局语法教程
 ES6 Javascript 实用开发技巧
 几种知名开源富文本编辑器对比
 python 字符串的一些操作
 python os模块一些常用操作

原文地址：https://www.cnblogs.com/web-wjg/p/7525712.html