在平常的开发过程中，对于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. 用php把access数据库导入到mysql

    <?php header("content-Type: text/html; charset=utf-8"); /// ///把access数据库转换成mysql的SQL语句 ...

  2. 【Apache】Apache服务的基本概念（二）

    Apache服务的基本概念 Apache安装请参照:[Apache]Apache服务的安装(一) 1.端口 apache默认监听TCP协议端口80端口 2.apache服务 apache服务默认会启动 ...

  3. MySQL LOCK TABLES 与UNLOCK TABLES

    http://blog.csdn.net/zyz511919766/article/details/16342003 1语法 LOCK TABLES tbl_name[[AS] alias] lock ...

  4. floor函数

    C++中 可以用floor函数来截断小数部分 floor(x)返回一个不大于x的整数,有点像取整函数

  5. 2019.02.07 bzoj4784: [Zjoi2017]仙人掌（仙人掌+树形dp）

    传送门 题意:给一个无向连通图,问给它加边形成仙人掌的方案数. 思路: 先考虑给一棵树加边形成仙人掌的方案数. 这个显然可以做树形dp. fif_ifi​表示把iii为根的子树加边形成仙人掌的方案数. ...

  6. lambda表达式(c++11)

    1.概念 1)lambda表达式是一个可调用的代码单元,它由一个捕获列表.一个参数列表.一个箭头.一个返回类型.一个函数体组成: 2)可以忽略参数列表和返回类型,但必须包含捕获列表和函数体: 3)忽略 ...

  7. 使用Docker镜像

    1     使用Docker镜像 1.1   获取镜像 命令格式:docker pull NAME[:TAG] NAME为镜像仓库的名称 TAG为镜像的标签(表示版本号) 描述一个镜像需要包括:名称+ ...

  8. s5-13 RIP 为什么会 衰败

    DV路由可能遇到的问题 路由环路( routing loop) 计数到无穷问题( Count to infinite) 收敛慢的问题( slow Convergence ) 相信错误的路由信息导致 好 ...

  9. IntelliJ IDEA 2017版 spring-boot 2.03后 Pageable用法;Pageable用法，PageRequest过时，新用法；Pageable过时问题；

    1.旧版本Pageable用法: 但是会显示,这个版本已经过时,这时可以查看源码. 一般,一个方法过时,就会在其附近形成一个新的同名的但是其他用法的方法.按照这个理念,来找这个源码.很幸运,蒙对了,我 ...

  10. 第09章：MongoDB-CRUD操作--文档--修改--update

    ①语法 db.collection.update( <query>, <update>, { upsert: <boolean>, multi: <boole ...