CSS_负边距

最新推荐文章于 2018-05-04 00:27:23 发布

weixin_34375054

最新推荐文章于 2018-05-04 00:27:23 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/somesayss/archive/2013/01/13/2858668.html

版权

排列表:

<style type="text/css">
.clear{zoom:1;}
.clear:after{visibility:hidden;display:block;font-size:0;content:"1";clear:both;height:0;}
.main{width:550px;margin:0 auto;background:#EEE;padding:10px 0 30px 0;}
.main ul{background:#eaee89;margin-right:-50px;_position:relative;}
.main li{float:left;width:98px;height:98px;margin:20px 50px 0 0;background:#9aa1cc;border:1px dashed #000;_display:inline;}
</style>
<div class="main">
    <ul class="clear">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

效果图:

九宫格:

<style type="text/css">
.clear{zoom:1;}
.clear:after{visibility:hidden;display:block;font-size:0;content:"1";clear:both;height:0;}
.main{width:180px;margin:0 auto;padding:30px 0;background:#EEE;}
.main a{float:left;width:50px;height:50px;border:1px solid #84b4d2;color:#666;text-align:center;font:12px/50px Arial;margin:0 -1px -1px 0;position:relative;}
.main a:hover{border-color:#F00;z-index:1;}
</style>
</head>
<body>
<div class="main">
    <div class="clear">
        <a href="javascript:void(0)">1</a>
        <a href="javascript:void(0)">2</a>
        <a href="javascript:void(0)">3</a>
        <a href="javascript:void(0)">4</a>
        <a href="javascript:void(0)">5</a>
        <a href="javascript:void(0)">6</a>
        <a href="javascript:void(0)">7</a>
        <a href="javascript:void(0)">8</a>
        <a href="javascript:void(0)">9</a>
    </div>
</div>