在平常的开发过程中，对于text-align一般用到的是left,center,right，这三个属性都不会陌生。然而，对于justify的使用我却是很陌生。首先有个比较简单的例子。

如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        span{

            width: 60px;

            text-align: justify;

            float: left;

        }

        span:after{

            content:'.';

            width: %;

            display: inline-block;

            overflow: hidden;

            height: ;

        }

        input{

            width: 100px;

        }

    </style>

</head>

<body>

    <div class="demo">

        <span>昵称</span>：<input type="text" style = 'width: 100px'><br><br>

        <span>电子邮箱</span>：<input type="email" style = 'width: 100px;'>

    </div>

</body>

</html>

效果图如下：

此处注意冒号“：”必须在<span>的外面。否则不生效。

html\css不同长度文本左右对齐 text-align:justify的使用的更多相关文章

  1. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  2. [Swift]LeetCode68. 文本左右对齐 | Text Justification

    Given an array of words and a width maxWidth, format the text such that each line has exactly maxWid ...

  3. [LeetCode] Text Justification 文本左右对齐

    Given an array of words and a length L, format the text such that each line has exactly L characters ...

  4. [CSS]文本属性（Text）

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  5. HTML + CSS短标题（二，三，四文字长度）两端对齐的方式

    今天切图碰到了一个看似好弄,却并不好弄的文本两端对齐问题.如图1-1

  6. css之文本两端对齐

    在进行网页设计时,我们经常会看到这样的样式:文本两端对齐. css为我们提供了一个属性可以实现这样的效果:text-align: justify.不过这个只能用来设置多行文本(除最后一行).如果只有单 ...

  7. css文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  8. CSS 文本垂直居中对齐

    文本垂直居中对齐是一个很常见的问题,这里总结一下. 一.容器高度固定,单行文本垂直居中对齐 height:20px; line-height:20px; overflow:hidden; 二.容器高度 ...

  9. css之文本两端对齐的两种解决方法

    说起文本对齐,大家都知道text-align,最常用的有left.right.center,今天我们说一下justify,也就是文本两端 对齐.说起来简单,但是有些小坑大家还是要注意的. 现在我们有这 ...

随机推荐

  1. [转]sqlmap使用教程

    sqlmap也是渗透中常用的一个注入工具,其实在注入工具方面,一个sqlmap就足够用了,只要你用的熟,秒杀各种工具,只是一个便捷性问题,sql注入另一方面就是手工党了,这个就另当别论了. 今天把我一 ...

  2. 无法嵌入互操作类型"ESRI.ArcGIS.Carto.MapDocumentClass".请改用适用的接口

    在对地图文档进行操作时,居然出现如下问题: IMapDocument m_MapDocument = new ESRI.ArcGIS.Carto.MapDocumentClass(); 报错: 无法嵌 ...

  3. ListView嵌套 EditText的光标不显示

    ListView嵌套EditView,有可能会出现了下面现象: 点击EditView,EditView获取焦点后,有可能光标不显示,也有可能光标不闪烁.点击多次后,光标才正常显示. 获取焦点后,edi ...

  4. Apache Prefork、Worker和Event三种MPM分析

    三种MPM介绍 Apache 2.X  支持插入式并行处理模块,称为多路处理模块(MPM).在编译apache时必须选择也只能选择一个MPM,对类UNIX系统,有几个不同的MPM可供选择,它们会影响到 ...

  5. transform.forward和vector3.forward

    Vector3.forward的值永远是(0,0,1)(这里的(0,0,1)是世界坐标的(0,0,1)),而transform.forward我们可以理解为其对应物体的z轴方向,是一个向量,而不是一个 ...

  6. mysql 5.7 修改密码

    mysql 5.7 ,user表就没有password 这个字段了. ') where user='root' and host='localhost'; 这样当然就改不了密码了. ') where ...

  7. 2018.12.15 spoj1812 Longest Common Substring（后缀自动机）

    传送门 后缀自动机模板题. 题意简述:求两个字串的最长公共子串长度. 对其中一个构建后缀自动机,用另外一个在上面跑即可. 代码: #include<bits/stdc++.h> #defi ...

  8. SVD图片有损压缩测试

    注意文件名别保持成svd.m,这样与系统的默认svd程序冲突 图片处理函数生成的三组二维数组对应RGB,处理时保留一组 clear all; close all; clc; a1=imread('C: ...

  9. boost-字符编码转换：使用conv

    Windows下的字符集转换可以使用WideCharToMultiByte/ MultiByteToWideChar,Linux下字符集转换可以使用iconv()函数,下面为使用boost的conv来 ...

  10. 安卓4.2用adb 获取屏幕分辨率等信息

    在终端输入adb shell dumpsys: 终端会打印出一些service list 用adb shell dumpsys+service名即可查询相应的信息. 屏幕分辨率用adb shell d ...