关于负margin的一些应用
最近听大家在讨论 负margin的一些应用，所以自己研究一下，下面做一些记录。
1. 实现左右两列布局
方法一：
XML/HTML Code复制内容到剪贴板- <div>
- <div style="float:left;width:200px;">左侧div>
- <div style="margin-left:200px;background:#999;">右侧div>
- div>
方法二：
- <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复制内容到剪贴板- >
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Documenttitle>
- <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>1li>
- <li>2li>
- <li>3li>
- ul>
- div>
- body>
- html>
或者：
XML/HTML Code复制内容到剪贴板- >
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Documenttitle>
- <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>1li>
- <li>2li>
- <li>3li>
- ul>
- div>
- body>
- html>
以上这篇关于负margin的一些应用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持潘少俊衡。
原文地址：http://blog.csdn.net/fanhaiwang520/article/details/8950189
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/CSS/77778.html
