CSS - Display inline

简单讲就是:

display: inline 转化成内联元素，不换行；

display: block转换成块元素，换行；

display: inline-block内联块元素，既不换行又可以使用块元素所拥有的属性，类似于块元素加了浮动效果.

display: None 隐藏标签

 

CSS文件

body{
    margin:0;
}
.pg-head{
    height:48px;
    background-color: brown;
    color: white;
    line-height: 48px;
}
.pg-head .menu a{
    padding: 0 10px;
    display: inline-block;
}
.pg-head .menu a:hover{
    background-color: bisque;
}
.left{
    float: left;
}
.right{
    float: right;
}
.w{
    width:980px;
    margin: 0 auto;
}

 

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chouti</title>
    <link href="menu.css" rel="stylesheet"/>
</head>
<body>
    <div class="pg-head">
        <div class="w">
            <div class="left menu">
                <a href="#">菜单一</a>
                <a href="#">菜单二</a>
                <a href="#">菜单三</a>
            </div>
            <div class="right menu">
                <a href="#">注册</a>
                <a href="#">登录</a>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">hello world!</div>
        <br/>
        <div class="w">hello Alex!</div>
    </div>
</body>
</html>

 

posted @ 2017-04-11 20:51  Vincen_shen  阅读(187)  评论(0)    收藏  举报