解決ul裏最後一個li的margin問題

時間 2019-11-13

標籤解決最後一個 margin 問題欄目 CSS 简体版

原文原文鏈接

在html+css佈局裏ul>li挺經常使用的，在羣裏（WEB前端開發 458732443）總有新手問怎麼解決li的最後一個margin值的問題。
下面介紹一下，大神請不要拍磚。

先看兩個demo，你能夠先運行，改變box的寬度看一下。
一、運用css3的nth-child(3n)css

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

二、運用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-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的寬度

因爲自身帶了margin-right被擠下去了

用css3的nth-child(3n)解決辦法

如今流行響應式佈局，這種css3解決辦法，在響應的時候並不靠譜

下面用margin負值解決辦法

同理能夠用margin-right負值。本身研究
對於新手，若是不須要考慮古代瀏覽器和響應式就用css3。反之用margin負值。前端