zoukankan      html  css  js  c++  java
  • 使用CSS达到文字首尾对齐效果

    在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如:

    <span>姓名:</span>
    <span>联系方式:</span>
    

    姓名:
    联系方式:

    有些人会使用直接在姓名之间添加&nbsp(No Break space)的方式来达到对齐效果例如:

    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>
    <span>联系方式:</span>
    

    姓       名:
    联系方式:

    使用这种方式是错误的,且不说代码整洁程度如何,在不同的字体类型下一个&nbsp宽度可能是不同的。有时候一个文字需要两个,有时候是三个甚至无法换算(类似于1.2个)。
    在这里介绍一种通用的使用CSS达到效果的方式:

    <style>
    span{
    	width:5em;
    }
    span::after {
    	content:'';
    	display:inline-block;
    	width:100%;
    }
    </style>
    
    <span>姓名:</span>
    <span>联系方式:</span>
    

    只需给span标签添加宽度并添加一个伪类即可实现相应效果

    笔者发现这个方法对浏览器有要求,目前chrome下和部分firefox浏览器下可以正常使用

  • 相关阅读:
    Linux学习总结(18)——Linux使用init命令关机、重启、切换模式
    iOS autorelease使用详解
    iOS xib的使用详解
    iOS ASI--缓存
    iOS ASI--其他用法
    iOS ASI--管理多个请求
    iOS ASI--文件上传
    iOS ASI--文件下载
    iOS ASI--POST请求
    iOS ASI--GET请求
  • 原文地址:https://www.cnblogs.com/YooHoeh/p/10465737.html
Copyright © 2011-2022 走看看