关于负margin的一些应用

2024-07-11 08:34:51

字体：大中小

来源：转载

供稿：网友

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

1. 实现左右两列布局

方法一：

XML/HTML Code复制内容到剪贴板

方法二：

XML/HTML Code复制内容到剪贴板

对比两种方法，第一种用到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;