CSS---h3标题、横线、和圆形按纽共处一行

时间：2016-06-09 23:39:29 阅读：612 评论：0 收藏：0 [点我收藏+]

标签：

技术分享

代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        .clearfloat{
            zoom:1;/*激活IE属性*/
        }
        .clearfloat:after{
            display: block;
            clear: both;
            content: ‘‘;
            visibility: hidden;
            height: 0;
        }
        .header{
            width: 1000px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            background: #ccc;
        }
        .header h3{
            float: left;
            margin-left: 40px;
            color: #fff;
        }
        .header .line{
            float: left;
            width: 200px;
            margin-left: 50px;
            margin-top: 20px;
            border-top: 1px solid #fff;
        }
        .header .btn-group{
            float: right;
            margin-right: 20px;
        }
        .header .btn{
            /*inline-block元素默认会有4px的边距的hack，例如img，解决方法是将其改成block元素*/
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-left: 6px;
            background: #999;
            border-radius: 50%;/*盒子会变成圆*/
        }
        .header .active{
            background: #69f;
        }
    </style>
</head>
<body>
    <div class="header clearfloat">
        <h3>fruit list</h3>
        <div class="line"></div>
        <div class="btn-group">
            <a href="" class="btn active"></a>
            <a href="" class="btn"></a>
            <a href="" class="btn"></a>
            <a href="" class="btn"></a>
        </div>
    </div>
</body>
</html>

CSS---h3标题、横线、和圆形按纽共处一行

标签：

原文地址：http://www.cnblogs.com/beast-king/p/5572838.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行