实现文字两端对齐

最新推荐文章于 2024-04-17 14:47:58 发布

weixin_zsh

最新推荐文章于 2024-04-17 14:47:58 发布

阅读量2.6k

点赞数 1

分类专栏：前端样式文章标签： css

本文链接：https://blog.csdn.net/weixin_41863239/article/details/81365187

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

样式

6 篇文章 0 订阅

订阅专栏

页面开发遇到需要实现文字两端对齐的时候很多，主要使用的是

text-align:justify;

text-align 属性规定元素中的文本的水平对齐方式

但是事实上，在实现两端对齐时，仅设置text-align:justify 实现不了的，还要加上

一个span标签，设置padding-left:100% ，虽然我也不知道为什么。

这是一个小demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
    <title>text-align</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
   		 *{
			padding-left: 0px;
			padding-right: 0px;
			font-size: 4vw;
			font-family: "微软雅黑";
		}
    	.ycwy{
			background-color: #0388E7;
			height: 5vh;
			color: white;
			width: 100vw;
		}
		.yc_t{
			margin-top: 1vh;
			width: 98vw;
			height: 3vh;
			line-height: 3vh;
			/*划重点1*/
			text-align:justify;
		}
		.yc_t span{
			display: inline-block;
			/*划重点2*/
			padding-left: 100%;
		}
    </style>
</head>
<body>
<section>
	<div class="ycwy">
		<div class="col-xs-12">
			<!--划重点3-数字要用空格隔开，否则达不到效果-->
			<div class="col-xs-12 yc_t">1 2 1 2 养车全年无忧<span></span></div>
		</div>
	</div>
</section>
</body>
</html>

复制过去，运行一下，调到手机端，可以看到如下效果

weixin_zsh

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现文字两端对齐

页面开发遇到需要实现文字两端对齐的时候很多，主要使用的是text-align:justify;text-align 属性规定元素中的文本的水平对齐方式但是事实上，在实现两端对齐时，仅设置text-align:justify 实现不了的，还要加上一个span标签，设置padding-left:100% ，虽然我也不知道为什么。这是一个小demo&lt;!DOCTYPE...
复制链接

扫一扫