(⊙_⊙)【负值】负边距+定位:水平垂直居中,去除列表右边距,去除列表最后一个li元素的border-bottom

负值之美:负值在页面布局中的应用
http://www.topcss.org/?p=94

(⊙_⊙)【负值】负边距+定位:水平垂直居中,去除列表右边距,去除列表最后一个li元素的border-bottom

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <style type="text/css">

        *{margin:0;padding:0}

        body{height:4000px;color:#000;font:12px/1.5 arial}

        ul{list-style:none}



        .box1{position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;width:200px;height:200px;background:#f00}



        .box2{width:320px;overflow:hidden;border:1px solid #000}

        .box2 ul{float:left;margin-right:-10px;margin-bottom:-10px}

        .box2 li{float:left;width:100px;height:100px;margin:0 10px 10px 0;background:#f00}



        .box3{width:200px;border:1px solid #000}

        .box3 li{height:20px;margin-bottom:-1px;border-bottom:1px solid #000}

    </style>

    <div class="box1"></div>

    <div class="box2">

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    <ul class="box3">

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>

你可能感兴趣的:(border)