负margin怎么用

这篇文章主要为大家展示了“负margin怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“负margin怎么用”这篇文章吧。

创新互联网站建设公司提供网站设计和自适应建站服务。团队由有经验的网页设计师、程序员和市场专家组成，能够提供从html5，网站制作，广告投放平台，模板建站到小程序开发等全方位服务。以客户为中心，致力于为客户提供创新、高效的解决方案，帮助您打造成功的企业网站。

1. 实现左右两列布局

方法一：

<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.导航栏

<!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>

或者：

<!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怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前名称：负margin怎么用
地址分享：https://www.cdcxhl.com/article32/gdhgpc.html

成都网站建设公司_创新互联，为您提供企业建站、网站改版、、做网站、品牌网站制作、云服务器

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容