<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. [SAP ABAP开发技术总结]BAPI调用

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. zoj 1648 判断线段是否相交

    链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=648 Circuit Board Time Limit: 2 Second ...

  3. PHP 全局变量 $_SERVER

    $_SERVER['SERVER_ADDR']    当前运行脚本所在的服务器的 IP 地址. $_SERVER['REQUEST_TIME']    请求开始时的时间戳.从 PHP 5.1.0 起可 ...

  4. maven2 配置M2_REPO

    从eclipse中增加了maven2的插件之后,maven默认的本地库的路径是${user}/.m2/repository/下,一般windows用户的操作系统都安装在C盘,所以这个目录 下的jar包 ...

  5. Spring的DI(Ioc) - 利用构造器注入

    1: 在给对象提供构造器 public class PersonServiceImpl implements PersonService { private PersonDao personDao; ...

  6. ZOJ-2364 Data Transmission 分层图阻塞流 Dinic+贪心预流

    题意:给定一个分层图,即只能够在相邻层次之间流动,给定了各个顶点的层次.要求输出一个阻塞流. 分析:该题直接Dinic求最大流TLE了,网上说采用Isap也TLE,而最大流中的最高标号预流推进(HLP ...

  7. Matlab中的persistent变量

    persistent, 用于定义persistent变量.persistent变量对于声明它的函数来说是局部的,但是当退出该函数时,该变量仍然保存在内存中,数值并不变.persistent变量与全局变 ...

  8. [mysql]支持emoji（字符集问题）！

    问题的根源 主要问题就是在字符集,一般解决这种问题都是靠试验.我实验了一通,得出的结论和大家分享一下(如有错误,还望指正): 数据库的字符集 数据库连接的字符集 配置方法 设置数据库的字符集为utf8 ...

  9. adb 查看日志信息

    adb logcat 详解  (1) 下面命令将只会显示AndroidRuntime类型的Error消息:         adb  logcat -s AndroidRuntime  (2) 显示全 ...

  10. sql语句语法大全

    一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...