前端CSS开发:解决ul里最后一个li的margin问题

动态前端开发工具|ws 前端开发工具|web 前端开发工具有哪些

先看两个demo,你可以先运行,改变box的宽度看一下。
1、运用css3的nth-child(3n)
html 代码片段

<!DOCTYPE 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负值
html 代码片段

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

首先,看看设计的样子,并计算.box的宽度

由于自身带了margin-right被挤下去了

用css3的nth-child(3n)解决办法

现在流行响应式布局,这种css3解决办法,在响应的时候并不靠谱

下面用margin负值解决办法

同理可以用margin-right负值。自己研究
对于新手,如果不需要考虑古代浏览器和响应式就用css3。反之用margin负值。

cocos2dx前端开发环境搭建|前端搭建开发环境搭建|sts前端开发环境

» 本文来自:前端开发者 » 《前端CSS开发:解决ul里最后一个li的margin问题》
» 本文链接地址:https://www.rokub.com/4816.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!