<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. Oracle一列的多行数据拼成一行显示字符

    Oracle一列的多行数据拼成一行显示字符   oracle 提供了两个函数WMSYS.WM_CONCAT 和 ListAgg函数.    www.2cto.com   先介绍:WMSYS.WM_CO ...

  2. Python学习笔记6-字典

    定义 使用键值对, >>> person = {"name":"keven","age":15,"gender& ...

  3. AJAX的简介

    AJAX 指异步JavaScript及XML(Asynchronous JavaScript And XML(异步JavaScript和XML)),是指一种创建交互式网页应用的网页开发技术. 国内通常 ...

  4. Android中xml设置Animation动画效果详解

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  5. 转:strcpy实现的考察要点

    strcpy函数的实现 已知strcpy函数的原型是: char *strcpy(char *dst, const char *src); 实现strcpy函数 解释为什么要返回char * 假如考虑 ...

  6. 记录---base64

    什么是Base64呢? Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2049,上面有MIME的详细规范.Base64编码可用于在HTTP环境下 ...

  7. QT对话框模式与非模式

    QT模态对话框及非模态对话框 非模态对话框(Modeless Dialog)的概念不是模态对话框就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭.对于在模态来显示对 ...

  8. hiho1093_spfa

    题目 SPFA模板题,题目中数据可能有两个点之间有多条边直接相连,使用 unordered_map< int, unordered_map< int, int>>, 来存储图的 ...

  9. nginx日志分析手机使用频次

    __author__ = 'similarface' from collections import defaultdict import glob ip = r"?P<ip>[ ...

  10. 虚拟机装centos 桥接方式上网[转]

    http://blog.csdn.net/sunbiao0526/article/details/6804127   虚拟机选择bridge方式连接网络 首先 vi /etc/sysconfig/ne ...