在平常的开发过程中，对于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. centos 6.5 配置ssh免登录

    生成密匙: ssh-keygen -t rsa 会生成 id_rsa  id_rsa.pub id_rsa:私匙 id_rsa.pub:公匙 配置当前机器免登录: cp id_rsa.pub auth ...

  2. 《C#从现象到本质》读书笔记（二）第2章 C#类型基础（上）

    <C#从现象到本质>读书笔记第二篇 第2章 C#类型基础(上) 类型指的是集合{类,结构,接口,枚举,委托}中的任意一个成员.任何拥有某类型的值(value)称为某类型的一个实例(inst ...

  3. The Django Book第七章(表单)

    从Request对象中获取数据 在views函数里．我们常常写到 from django.http import HttpResponse def hello(request): return Htt ...

  4. Linux下启动停止查看杀死Tomcat进程

    文章来自:http://www.linuxidc.com/Linux/2011-06/37180.htm 启动 一般是执行tomcat/bin/startup.sh,sh tomcat/bin/sta ...

  5. Django的学习（二）————Templates

    一.django的模板: 在settings.py的文件中可以看到并设置这个模板. 1.直接映射: 通过建立的文件夹(templates)和文件(html)来映射. <!DOCTYPE html ...

  6. linux 磁盘挂载及查看磁盘

    blkid命令实例 .列出当前系统中所有已挂载文件系统的类型: sudo blkid .显示指定设备 UUID: sudo blkid -s UUID /dev/sda5 .显示所有设备 UUID: ...

  7. static与非static的区别

    static 静态的,可以修饰变量或者方法 用于变量的区别 1. static 修饰的变量称为类变量或全局变量或成员变量,在类被加载的时候成员变量即被初始化,与类关联,只要类存在,static变量就存 ...

  8. PHP中的__get()和__set()方法获取设置私有属性

    在类的封装中,获取属性可以自定义getXXX()和setXXX()方法,当一个类中有多个属性时,使用这种方式就会很麻烦.为此PHP5中预定义了__get()和__set()方法,其中__get()方法 ...

  9. ajax 简单实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> ...

  10. Day1-Python基础--数据类型

    距离上次更新,已经一月有余.说明学习状态不好,且滞后严重.第二模块也滞后5周之多,可能学习方法不对,有点凌乱,导致写作业时思路还是打不开,再一个是练习的太少了吧,以后得多挤挤时间来了.目前到了这个年纪 ...