在平常的开发过程中，对于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. CListBox多选情况处理方法

        如ListBox的内容如下,蓝色代表选中的内容 列表  索引  删除时索引  item1 0  0  item2 1  0  item3 2    item4 3  1 删除所有选中列: vo ...

  2. windows server 无人值守安装

    使用 answer file:AutoUnattend.xml 来无人值守安装,到了选系统这步 还是要手动选择一个系统,这是为什么?怎么设置可以默认进入GUI的系统进行安装啊?

  3. ajaxfileupload.js的简单使用

    上传文件 未选择任何文件 引入 <script src="../javaScript/ajaxfileupload.js"></script> <bu ...

  4. VC++ 简单的打印功能（对话框模式下）

    不多说,直接上代码 void CParamDlg::OnBnClickedButton6() { // TODO: 在此添加控件通知处理程序代码 CDC dc; CPrintDialog dlg(TR ...

  5. MySQL大数据量快速分页实现（转载）

    在mysql中如果是小数据量分页我们直接使用limit x,y即可,但是如果千万数据使用这样你无法正常使用分页功能了,那么大数据量要如何构造sql查询分页呢?     般刚开始学SQL语句的时候,会这 ...

  6. [转载]卡尔曼滤波器及其基于opencv的实现

    卡尔曼滤波器及其基于opencv的实现 源地址:http://hi.baidu.com/superkiki1989/item/029f65013a128cd91ff0461b 这个是维基百科中的链接, ...

  7. 9.Mybatis一级缓存和二级缓存

    所谓的缓存呢?其实原理很简单,就是在保证你查询的数据是正确的情况下,没有去查数据库,而是直接查找的内存,这样做有利于缓解数据库的压力,提高数据库的性能,Mybatis中有提供一级缓存和二级缓存. 学习 ...

  8. [Docker] docker 基础学习笔记1（共6篇）

    巩固一下yum: yum本身是centos自带的软件,可以删掉然后再重新安装. yum本身可以配置yum源,网络的,本地的都可以.之后安装docker需要配置一个扩展源.   从163的网址里边下载好 ...

  9. IOS低版本遇到了坑不知道你遇到了没

    拿着项目给客户测试,客户那边三个人俩人水果手机是ios8以下版本,结果导致｀｀｀(恭喜,坑出现!)总不能说老总!"您把版本升级到ios9 吧!

  10. Android之ProgressBar

    今天复习一下以前的知识,补充一下ProgressBar控件 progressBar是进度条组件,通常用于用户展示某个耗时操作完成的进度,而不让用户感觉是程序失去了响应,从而更好地提升用户界面的友好性. ...