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

代码如下：

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

时间： 2025-01-04 10:44:09

CSS---h3标题、横线、和圆形按纽共处一行的相关文章

2017-3-14文章名 css解决标题背景不显示文字

2017-3-14文章名 css解决标题背景不显示文字标签 text-indent: 100%; white-space: nowrap; overflow: hidden; 隐藏文字以图代字

CSS3边框属性_圆角、CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）

有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,用的是firefox或者chrome,当然IE也能看一部分 1.正方形 div{ background:#F00; width:100px; height:100px; } 2.长方形 div{ background:#F00; width:200px; height:100px; } 3.圆形 div{ width: 100px; height: 100px; background: red; -moz-border-radius: 5

css如何实现让两个div在同一行排列

css如何实现让两个div在同一行排列:让两个div元素在同一行排列是基本的操作,实现也非常的简单,可能会对初学者有所帮助.一.使用功能浮动方式:代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

CSS实现标题超出宽度省略号来表示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>标题</title> <style type="text/css"> div{ overflow:h

使用CSS处理标题过长，自动截断，兼容响应式布局

应用场景描述例如PHP 从数据库读取一个商品,那么当商品标题很长的时候,很可能会影响页面布局.处理方法如下: PHP 字符串截取 JS 字符串截取 CSS 属性处理(推荐) CSS 属性处理方法 html代码片段 <li > <span class="cut">商品标题商品标题商品标题商品标题商品标题商品标题</span> <span style="float: right;">9秒前</span> &l

css实现标题文字过长截取...

css实现网页中文字过长截取... title class应该这样写: .title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 说明: 1.宽度一定要设置,可以根据实际需求调整. 2.white-space:nowrap是禁止文字折行. 3.text-overflow表示当文本溢出时是否显示省略标记,有两个值: clip:不显示省略标记(...),而是简单的裁切. ellipsis:当对

CSS控制"标题前增加小图标或编号"

---题目前加图片--- p:before { content:url(xxx/xx.png); }//所有p的最前都有一个图标 p.a:after { content:url(xxx/xx.png); }//而含有类a的p最前和最后都有一个图标 <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p class='a'>5</p> ---题目前加标号--- p:b

【css flex】将多个<div>放在同一行

使用style里的flex属性默认情况下,一个div独占一行使用css选择器给外层div加上以下flex属性,则该div的子div可以在同一行中显示, .runs-paginator-flex-container { flex: 1 1 auto; flex-direction: row-reverse; display: flex; } <div className="runs-paginator-flex-container"> <div>1</d

前端每日实战：157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画（实际上每一行都是平行的）

效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cppKmsd 源代码下载每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f