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

在html+css布局里ul>li挺常用的，在群里（WEB前端开发 458732443）总有新手问怎么解决li的最后一个margin值的问题。
下面介绍一下，大神请不要拍砖。

先看两个demo，你可以先运行，改变box的宽度看一下。
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;}

　　  　 .box ul li:last-child {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-right:-10px;} // 这里是重点,设置-10,把最后一个的margin-right吃掉

        .box ul li{list-style:none;width:200px;height:100px;background:#fff;float:left;margin-bottom:10px;margin-right: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的宽度
解决ul里最后一个li的margin问题
由于自身带了margin-right被挤下去了

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

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

下面用margin负值解决办法

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

http://www.qdfuns.com/notes/18692/4aaf900b84dcb4ab111ddfd93b87c8ee.html

秒客网

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

相关文章