|
下面小编就为大家带来一篇关于负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 | 
发表于 2016-7-12 11:52:30
