文本对齐格式text-align:justify的使用心得_SEO优化教程_网络技术

文本对齐格式text-align:justify的使用心得_SEO优化教程

栏目：网络技术发布时间：2018-05-26

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

在平常的开发过程中，对于text-align一般用到的是left,center,right，这三个属性都不会陌生。然而，对于justify的使用我却是很陌生。今天就来说说这个justify用处。

首先有个比较简单的例子，首先是html代码：

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                .demo{
                        width: 70px;
                        /*text-align: justify;*/
                }
        </style>
</head>
<body>
        <div>
                <p>飞洒发fd达fasdf省sdf份发f送fdfd大df夫df萨</p>
        </div>
</body>
</html>

首先是不使用justify的结果：

然后我们使用justify，结果是：

可以看出每一段都对齐了。那么接下来，我们联想到这样的情况，两个字怎么和四个字对齐：

我们要把这个justify用在表单中，将文本对齐。于是有下面的代码：

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                span{
                        width: 70px;
                        text-align: justify;
                }
                input{
                        width: 100px;
                }
        </style>
</head>
<body>
        <div>
                <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; 各种用。但是发现在safari中微软雅黑不识别&emsp;等，于是只能找解决办法。*终在开心网的源代码中找到了解决办法。具体想法是：

首先既然单行不行，那么就用多行。但是怎么用单行呢？——用after。下面是html代码：

<!DOCTYPE html>
<html>
<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>
                <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。

# 博野网站建设系统 # 都对 # 医院抖音关键词排名 # 欧美seo查询营销 # 东营抖音seo品牌 # 孝感网站建设的市场费用 # 京熙妍seo电影 # 清风网站建设 # 工业区行业网站推广 # 网站制做网站推广 # 助听器百度推广网站 # 表单 # 高埗抖音seo模板 # 罗湖响应式网站建设价格 # 成都推广网站建设 # 榆林网站seo外包 # 网站免费推广哪家做的好 # 朝阳网站优化套餐在哪 # 合作抖音关键词排名推广 # ip推广网站 # 海口国兴抖音推广营销怎么样 # 机构联盟营销推广文案 # 这个问题 # SEO优化教程 # 文本对齐 # justify # 解决办法 # 的是 # 我在 # 有个 # 是有 # 却是 # 让我们 # 文本对齐格式text-align:justify的使用心得 # 要把 # 微软 # 问题是 # 怎么做 # 可以看出 # 就用 # 就来 # 两个字 # 设置为 # 用在

相关栏目：【网络营销44070 】【网络推广122852 】【网络优化116010 】【网址导航102054 】【网络技术82194 】【网络资讯43554 】

上一篇：移动端输入框弹出键盘带搜索按钮利于用户体验_SEO优化教程

下一篇：20份SEM竞价数据报表模板下载分享_SEO优化教程