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

　　首先是html代码：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .demo{

            width: 70px;

            /*text-align: justify;*/

        }

    </style>

</head>

<body>

    <div class = 'demo'>

        <p>飞洒发fd达fasdf省sdf份发f送fdfd大df夫df萨</p>

    </div>

</body>

</html>

　　首先是不使用justify的结果：

然后我们使用justify，结果是：

　　可以看出每一段都对齐了。

　　那么接下来，我们联想到这样的情况：

　　我们要把这个justify用在表单中，将文本对齐。

　　于是有下面的代码

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        span{

            width: 70px;

            text-align: justify;

        }

        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>

　　然而，结果去让我们非常失望：当text-align:justify使用在单行中，是起不到justify的作用的。那么我们该怎么做呢？

这个问题是我在项目中碰到的，由于我发现这个问题不可行，于是各种&ensp;&emsp;&nbsp;各种用。但是发现在safari中微软雅黑不识别&emsp;等，于是只能找解决办法。最终在开心网的源代码中找到了解决办法。具体想法是：

　　首先既然单行不行，那么就用多行。但是怎么用单行呢？——用after。

　　下面是代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        span{

            width: 100px;

            text-align: justify;

            float: left;

        }

        span:after{

            content:'.';

            width: 100%;

            display: inline-block;

            overflow: hidden;

            height: 0;

        }

        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设置为float: left。:after为inline-block

text-align:justify的使用的更多相关文章

  1. __attribute__ ((section(".text")))的测试

    一.测试原因 在学习u-boot的环境变量过程中,看到有如此的代码,现对涉及到的内容进行实验测试. 二.测试目的 1.了解gcc允许对段的属性进行更改的方法. 2.解决”ENV_IS_EMBEDDED ...

  2. Flutter 布局（二）- Padding、Align、Center详解

    本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...

  3. HTML 标签元素的 align 属性

    align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify  ...

  4. Extjs Vbox布局方式，以及align种类，flex，pack属性含义简介

    VBox布局方式,熟悉下一下几个主要属性: 一.align:字符类型,指示组件在容器内的对齐方式.这个是基于容器的左上角来排列的.pack不同,pack是根据容器的最上边来显示的. 1.left(默认 ...

  5. Flutter学习笔记（22）--单个子元素的布局Widget（Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox）

    如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...

  6. ThinkPHP + Discuz 整合方法

    ThinkPHP + Discuz 整合方法以下是Discuz6的整合方法,discuz5请按照里面的说明进行相应的修改,也可以使用了. 1.在项目的action目录下信件PublicAction.c ...

  7. PHP检测用户名是否存在

    reg.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  9. delphi HTML代码

    ################################属性 设置################################################字体设置{//-------- ...

  10. CSS3笔记之第一天

    通过展示实例来初步学习CSS3 1.背景 设置背景色:background-color:#b0c4de; 设置背景图片:background-image:url('paper.gif'); 设置背景图 ...

随机推荐

  1. nagios二次开发（六）---nagiosql原理及主要文件的介绍

    nagiosql的入口文件:index.php,这也是所有php程序的入口文件.是由apache指定的. index.php 文件的开始引入了 require("functions/prep ...

  2. 通过属性 Cesium的FBO主要支持两种方式

    角色其实就是一类权限的分组,所以给用户分配角色其实也是在给用户分配权限.在oracle中有三个比较常用的角色.对于一般不是很严格的系统可以授予开发用户CONNECT.RESOURCE角色权限即可. 其 ...

  3. 更新lispbox中的ccl和slime版本

    首先C-x C-f然后输入~,找到.emacs文件,根据slime官方文档说明的添加如下代码到文件末尾,重启一下emacs,slime就编译好了,然后这段代码就可以删除.否则每次启动emacs就算不用 ...

  4. Java Web 环境搭建步骤（超详细，包括前期安装步骤）

    Java Web 环境搭建步骤 安装对应版本的JDK 配置环境变量 本人安装的路径是C盘,在path中加入C:\Program Files\Java\jdk1.8.0_65\bin 测试配置成功,cm ...

  5. cf 733f

    给你很多条边,每条边有一个初始边权w1,然后还有一个值表示把这个边权减一的代价w2,然后给你一个预算budget,然后让你输出怎么选边之后构成的树的边权和最小(在用budget减少了边权之后),输出你 ...

  6. map集合键值对存储，键值不重复，值可以重复

    import java.util.HashMap; import java.util.Hashtable; import java.util.Iterator; import java.util.Li ...

  7. Android "adb devices no permissions"

    列出当前连接设备时出现以下情况 [user@dell platform-tools]# ./adb devices List of devices attached ???????????? no p ...

  8. C# 以管理员身份运行WinForm程序

    最近帮客户开发的WinForm客户端,部分在使用的过程中,会出现“系统文件找不到”的错误提示. 调试后,确定为程序在操作配置文件时,系统权限引起的错误,直接管理员权限运行就正常了. 考虑用户操作的便利 ...

  9. Python—函数的参数组合

    参数组合 在Python中定义函数,可以用必选参数.默认参数.可变参数.关键字参数和命名关键字参数,这5种参数都可以组合使用.但是请注意,参数定义的顺序必须是:必选参数.默认参数.可变参数.命名关键字 ...

  10. db2 常用函数

    语法:VALUE(EXPRESSION1,EXPRESSION2) VALUE函数是用返回一个非空的值,当其第一个参数非空,直接返回该参数的值,如果第一个参数为空,则返回第一个参数的值. eg: -- ...