在平常的开发过程中，对于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. 使用SerialPort 读取外置GPS信息和使用GeoCoordinateWatcher获取内置gps的信息

    简介最近工作中需要读取gps设备的信息,平板本身有内置的gps设备,但是精度不够,就又添加了一个外置的gps.对于外置的gps,我们主要通过SerialPort类来获得串口的信息,然后对接收到的内容进 ...

  2. ubuntu使用 服务

    在这里写了很多篇linux,习惯了在这里写 centos中定时任务命令是crond ubuntu中定时任务命令是cron 这两种linux系统不一样的地方还是挺多的, 既然我目前的专注点是ubuntu ...

  3. js中的tostring()方法

    http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...

  4. Linux内核开机保留大块内存的方法

    http://www.linuxidc.com/Linux/2014-03/97952.htm

  5. VB.net 调用dll

    Public Declare Function APlayer_OpenA Lib "APlayerCaller.dll" (ByVal aplayer As Integer, B ...

  6. win7 双屏双任务栏

    扩展屏幕下都显示任务栏!!! 第一步:Dual Monitor Taskbar 下载 下载链接:链接: http://pan.baidu.com/s/1pKxYUFL 密码: gu5c 第二步:安装完 ...

  7. npm install 出现UNABLE_TO_GET_ISSUER_CERT_LOCALLY

    解决方式 As a workaround you can turn ssl checking off in your .npmrc 执行 npm config set strict-ssl false ...

  8. RTTI 运行时类型识别 及异常处理

    RTTI   运行时类型识别 typeid  ------  dynamic_cast dynamic_cast 注意事项: 1.只能应用于指针和引用之间的转化 2.要转换的类型中必须包含虚函数 3. ...

  9. HDU 1285 确定比赛名次 拓扑排序模板题

    http://acm.hdu.edu.cn/showproblem.php?pid=1285 #include <cstdio> #include <cstdlib> #inc ...

  10. Chrome 自动填充的表单是淡黄色的背景，有方法自定义吗

    input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }