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

如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        span{

            width: 60px;

            text-align: justify;

            float: left;

        }

        span:after{

            content:'.';

            width: %;

            display: inline-block;

            overflow: hidden;

            height: ;

        }

        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>的外面。否则不生效。

html\css不同长度文本左右对齐 text-align:justify的使用的更多相关文章

  1. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  2. [Swift]LeetCode68. 文本左右对齐 | Text Justification

    Given an array of words and a width maxWidth, format the text such that each line has exactly maxWid ...

  3. [LeetCode] Text Justification 文本左右对齐

    Given an array of words and a length L, format the text such that each line has exactly L characters ...

  4. [CSS]文本属性（Text）

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  5. HTML + CSS短标题（二，三，四文字长度）两端对齐的方式

    今天切图碰到了一个看似好弄,却并不好弄的文本两端对齐问题.如图1-1

  6. css之文本两端对齐

    在进行网页设计时,我们经常会看到这样的样式:文本两端对齐. css为我们提供了一个属性可以实现这样的效果:text-align: justify.不过这个只能用来设置多行文本(除最后一行).如果只有单 ...

  7. css文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  8. CSS 文本垂直居中对齐

    文本垂直居中对齐是一个很常见的问题,这里总结一下. 一.容器高度固定,单行文本垂直居中对齐 height:20px; line-height:20px; overflow:hidden; 二.容器高度 ...

  9. css之文本两端对齐的两种解决方法

    说起文本对齐,大家都知道text-align,最常用的有left.right.center,今天我们说一下justify,也就是文本两端 对齐.说起来简单,但是有些小坑大家还是要注意的. 现在我们有这 ...

随机推荐

  1. @1-4使用Xpath解析豆瓣短评

    使用Xpath解析豆瓣短评 Python爬虫(入门+进阶)     DC学院 本节课程主要介绍解析神器Xpath是什么.Xpath如何安装及使用,以及使用实际的例子讲解Xpath如何解析豆瓣短评的网页 ...

  2. JDK 之资源文件管理

    JDK 之资源文件管理 JDK 规范目录(https://www.cnblogs.com/binarylei/p/10200503.html) 一.文件资源 user.home 用户目录,如 Linu ...

  3. Asterisk的type类型和身份认证

    Asterisk的type类型和身份认证 转载:http://zeevli.blog.163.com/blog/static/119591610201111745012380/ 在Asterisk中对 ...

  4. [C#.Net]对WinForm应用程序的App.config的使用及加密

    我们在写C#应用程序时,在工程文件中放置一个app.config,程序打包时,系统会将该配置文件自动编译为与程序集同名的.exe.config 文件.作用就是应用程序安装后,只需在安装目录中找到该文件 ...

  5. mybatis学习二 全局配置文件常用配置

    全局配置文件的详细解析可以参考mybatis的中文参考文档 1.全局配置文件中内容1.1 <transactionManager/> type 属性可取值1.1.1 JDBC,事务管理使用 ...

  6. 比较完整的HIS系统解释（转载记录）

    HIS系统即医院信息系统(全称为Hospital Information System).在国际学术界,它已被公认为是新兴的医学信息学的重要分支.HIS系统的有效运行,将提高医院各项工作的效率和质量, ...

  7. 装箱问题(NOIP2001&水题测试2017082401)

    题目链接:装箱问题 这题经典的01背包. 动规. 设计状态f[n][V]表示前n个物体放在V中的最大体积是多少. 所以代码如下: #include<bits/stdc++.h> using ...

  8. Bootstrap之javascript组件

    一 模态框 模态框放在body标签里面的,是body标签的子元素 静态实例: <div class="modal fade" tabindex="-1" ...

  9. Eclipse的SVN插件使用

    1       eclipse的SVN插件使用 1.1     svn插件安装 下载Subversion的eclipse插件 http://subclipse.tigris.org/servlets/ ...

  10. QT5中无法包含Qtgui头文件的问题。

    今天新学QT是,从一个ppt中边看边抄边学.前几页还能理解,但到了用纯源码写空白QT工程时,便遇到了一个问题.头文件里包含 #include  <QtGui> 但是编译时总是出现下面图一中 ...