<style>

 .div{ position: relative; width: 100%; height: 30px; background: #ffff00}
        .div b{ display: block; height: 0; border-bottom: 1px dashed #ff0000; width:100%}
        .f1{ float: left; position: relative; left: 50%}
        .f1 span{ float: left; position: relative; height: 30px; line-height: 30px; background: pink;
            padding: 0 20px;font-size: 14px; left: -50%; margin-top: -15px;}

</style>

<div class="div">
    <b></b>
    <div class="f1">
        <span>亲爱的你好哦</span>
    </div>
</div>

高度30px，宽度自适应，点线在文字中间的更多相关文章

  1. CSS实现高度和宽度自适应

    其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...

  2. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度，即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

  3. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

    一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...

  4. 移动端canvas文字图片合成并生成图片（canvas宽度自适应移动端屏幕）

    这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...

  5. iOS之UILabel自适应高度、宽度

    下列两条自适应高度和宽度的自定义方法:

  6. iframe高度宽度自适应（转）

    http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应 完全跨域的iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过i ...

  7. 不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形

    现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法. 在一个div内,包含8个div,控制这个8个div的height.margin以及border属性值,以达到 ...

  8. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  9. ECharts 高度宽度自适应（转载）

    最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所 ...

  10. CSS学习笔记（6）--浮动，三列布局，高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

随机推荐

  1. Python基础学习笔记（十三）异常

    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-exceptions.html Python用异常对象(excep ...

  2. 设计js通用库

    设计js通用库的四个步骤: 1.需求分析:分析库需要完成的所有功能. 2.编程接口:根据需求设计需要用到的接口及参数.返回值. 3.调用方法:支持链式调用,我们期望以动词方式描述接口. (ps:设计链 ...

  3. poj3449Geometric Shapes

    链接 繁琐. 处理出来所有的线段,再判断相交. 对于正方形的已知对角顶点求剩余两顶点 (列出4个方程求解) p[].x=(p[].x+p[].x+p[].y-p[].y)/; p[].y=(p[].y ...

  4. mysql与mysqld

    mysql是客户机/服务器的结构. mysql是客户端行工具,连接mysqld服务,执行sql命令,可认为客户端sdk mysqld 启动mysql数据库服务. 脚本启动mysql服务的命令是 net ...

  5. Android activity四种基本启动模式

    standard:默认的模式,每次启动会新创建一个activity对象 singleTop:在当前任务栈中,判断栈顶是否为当前的activity,如果是,就直接使用,如果不是,就会创建新的activi ...

  6. Python学习笔记13—错误和异常

    常见的异常:

  7. golang 定时器

    上网查了下相关资料,基本上都介绍的是github.com\robfig\cron这个包来执行定时任务,试了下确实可以执行.但是此包下没有删 除任务的方法,只有暂停的方法(Stop),若要停止之前的任务 ...

  8. 如何让JS的变量名变量化

    unction message() { var k=0; // var olk+k="sdasdasd"; eval("var olk"+k+"='a ...

  9. 面向对象的static关键字（类中的static关键字）

    转自:http://blog.csdn.net/xiayefanxing/article/details/7382192 http://www.cnblogs.com/SelaSelah/archiv ...

  10. spring的初始化bean，销毁bean之前的操作详解

    我所知道的在spring初始化bean,销毁bean之前的操作有三种方式: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二种是 ...