在平常的开发过程中，对于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. Angular JS中$timeout的用法及其与window.setTimeout的区别

    $timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会 ...

  2. 自动化测试第一季-selenium + python（环境搭建与基础代码解释）

    # coding = utf-8              %%%%%%%%%%%%%%%%防止乱码(可加可不加) from selenium import webdriver             ...

  3. Ternary Search Trees 三分搜索树

    经常碰到要存一堆的string, 这个时候可以用hash tables, 虽然hash tables 查找很快,但是hash tables不能表现出字符串之间的联系.可以用binary search ...

  4. android_demo之自动生成动态表格

    今天我们学习了如何更好的利用Android 的 layout 布局. 接下来是个简单的栗子去了解这个自动生成的动态的控件(自动生成表格) 这是我们的layout 页面 <?xml version ...

  5. 新学习到的vi的一些命令

    1.普通模式下.符号可以重复上次的命令 2.普通模式下n<command>可以重复n次command命令 3.dw可以删除单个词    dnw可以删除n个单词  x和X可以在普通模式下删除 ...

  6. div显示提示信息

    div显示提示信息 <body> <style type="text/css"> a.link{position:relative;} a.link div ...

  7. 转：C# WinForm获取 当前执行程序路径的几种方法

    1.获取和设置当前目录的完全限定路径. string str = System.Environment.CurrentDirectory; Result: C:xxxxxx 2.获取启动了应用程序的可 ...

  8. 【转】如何理解c和c++的复杂类型声明

    转自:http://blog.chinaunix.net/space.php?uid=22889411&do=blog&id=59667 曾经碰到过让你迷惑不解.类似于int * (* ...

  9. JS验证字符长度

    function getStrLength(str) { var cArr = str.match(/[^\x00-\xff]/ig); return str.length + (cArr == nu ...

  10. {"读取 XML 数据时，超出最大名称表字符计数配额(16384)。。。。通过更改在创建 XML 读取器时所使用的 XmlDictionaryReaderQuotas 对象的 MaxNameTableCharCount 属性，。。

    这个问题倒腾了快一周,看了网上各种解决方案,还看了用谷歌翻译看了全英文的,参照了修改也没能够解决问题. 最后只有自己一行一行断点,一行一行删除代码,各种检测.主要是我在webservice里面新添加几 ...