在平常的开发过程中，对于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. git ssh端口号变更之后所需要的修改

    假设原本的repository地址为:git@gitlab.cjx.com:jinxin/project2.git 端口变更之后,需要调整为:ssh://git@gitlab.cjx.com:PORT ...

  2. Head First Html and CSS学习笔记之HTML

    初学前端开发,记录下自己的学习笔记. 第一章 认识HTML 1:关于HTML HTML是超文本标记语言(HyperText Markup Language)的缩写,用来建立网页的结构. 它只会根据标记 ...

  3. 第十章 DOM

    10.1节点层次 html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型. 10.1.1 Node类型 JavaScript中的所有节点类型 ...

  4. information_schema.TABLES

    获取所有表结构(TABLES) SELECT * FROM information_schema.TABLES WHERE TABLE_SCHEMA='数据库名'; TABLES表:提供了关于数据库中 ...

  5. error-2015-9-9

    类型的建键部分无效,该键的所有部分均不可为null 映射从第行开始的片段时有问题 表的键具有潜在运行时冲突 列映射到概念端的属性 但是它们未形成entitySet的键属性 报错: 未能加载文件或程序集 ...

  6. oracle 数据库学习3 --oracle 数据库中常使用的函数

    1.字符函数: ASCII(X) -->返回X字符的ASCII码 concat(x,y)-->将y连接到X上输出 select concat(first_name,last_name) f ...

  7. cordova常用资料源

    cordova的中文资料https://github.com/CordovaCn/CordovaCn 官方文档: http://cordova.apache.org/docs/en/latest/ E ...

  8. 【python】迭代器&生成器

    源Link:http://www.cnblogs.com/huxi/archive/2011/07/01/2095931.html 迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素 ...

  9. UI设计趋势:渐变设计风格重新回归主流

    在扁平化设计刚刚兴起之时,渐变是设计师们避之不及的设计手法,然而今天它已经正式回归.几乎是在一夜之间,无数的网站开始使用渐变色. 从背景到图片上的色彩叠加,包括UI元素上所遮盖的色彩,所有的这一切都表 ...

  10. WCF、WebAPI、WCFREST、WebService之间的区别

    注明:转载 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下,你有很多的选择来构建一个HTTP Services.我 ...