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浏览器下可以正常使用

  • 相关阅读:
    HDU多校第六场——HDU6638 Snowy Smile(线段树区间合并)
    java
    java
    java
    java
    java
    python
    appium
    python
    python
  • 原文地址:https://www.cnblogs.com/YooHoeh/p/10465737.html
Copyright © 2011-2022 走看看