关于负margin的一些应用

最近听大家在讨论负margin的一些应用，所以自己研究一下，下面做一些记录。

1. 实现左右两列布局

方法一：

XML/HTML Code复制内容到剪贴板 <div> <div style="float:left;width:200px;">左侧</div> <div style="margin-left:200px;background:#999;">右侧</div> </div>

方法二：

XML/HTML Code复制内容到剪贴板 <div> <div style="width:200px;height:200px;">左侧</div> <div style="margin-left:200px;margin-top:-200px;">右侧</div> </div>

对比两种方法，第一种用到float，弊端就是应用float在IE中可能引起很多bug，第二种的话用-margin，本事还是比较赞的，暂时没发现没事问题；

2.导航栏

XML/HTML Code复制内容到剪贴板 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; border: 0; padding: 0; } ul{ overflow: hidden; } ul li{ background: #999; border-left: 1px solid #000; width:60px; height:30px; float: left; list-style: none; text-align: center; margin-left:-1px; } </style> </head> <body> <div style="margin-left:20px;"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>

或者：

XML/HTML Code复制内容到剪贴板 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; border: 0; padding: 0; } ul{ } ul li{ background: #999; border-left: 1px solid #000; border-right: 1px solid #000; width:60px; height:30px; float: left; list-style: none; text-align: center; margin-left:-1px; } </style> </head> <body> <div style="margin-left:20px;"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html> 合理使用overflow以及-margin 。

以上这篇关于负margin的一些应用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://blog.csdn.net/fanhaiwang520/article/details/8950189

关于负margin的一些应用