<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. CUBRID学习笔记 13 日志文件

    欢迎转载 ,转载时请保留作者信息.本文版权归本人所有,如有任何问题,请与我联系wang2650@sohu.com . 过错 CUBRID Broker Log Files  可以理解为数据库中间件日志 ...

  2. 基于jQuery的H5调试条

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  3. php获取在线xml的数据

    因为连接百度地图的API,然后通过经纬度得到位置信息,可是得到的位置信息是通过将经纬度嵌在url里面,生成xml文件后,因为是在线的,当时就想到在不下载的情况下获取里面的数据,因为使用代码下载是可以下 ...

  4. iOS - OC NSSet 集合

    前言 NSSet:集合 @interface NSSet<__covariant ObjectType> : NSObject <NSCopying, NSMutableCopyin ...

  5. 操作符 Thinking in Java 第三章

    3.1 更简单的打印语句 3.2 使用Java操作符 3.3 优先级 *int类型+String类型  直接转换为String类型 3.4 赋值 1. *引用=引用  两个引用指向同一个对象,所以操作 ...

  6. [转载] LinkedIn架构这十年

    原文: http://colobu.com/2015/07/24/brief-history-scaling-linkedin/ 原文: A Brief History of Scaling Link ...

  7. UIButton的状态

    normal(普通状态) 默认情况(Default) 对应的枚举常量:UIControlStateNormal highlighted(高亮状态)按钮被按下去的时候(手指还未松开)对应的枚举常量:UI ...

  8. OpenGL的GLUT初始化函数[转]

    OpenGL的GLUT初始化函数 void glutInit(int* argc,char** argv) 初始化GLUT库.对应main函数的形式应是:int main(int argc,char* ...

  9. [转载]WEB缓存技术概述

    [原文地址]http://www.hbjjrb.com/Jishu/ASP/201110/319372.html 引言 WWW是互联网上最受欢迎的应用之一,其快速增长造成网络拥塞和服务器超载,导致客户 ...

  10. 转！！JavaBean,List,Map转成json格式

    public class User { private String username; private String password; public String getUsername() { ...