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>
  • 相关阅读:
    Linq&Lumbda
    PS颜色模式
    WPF绑定方式
    明三杰刘健
    齐有鲍叔,郑有子皮
    朱厚照
    管子&小白
    时间
    人外有人之神箭手养繇基篇
    楚共王
  • 原文地址:https://www.cnblogs.com/web-wjg/p/7525712.html
Copyright © 2011-2022 走看看