实现单行文字两端对齐，例如要实现下列单行文字对齐

最新推荐文章于 2023-01-25 19:07:07 发布

小鬼bustern

最新推荐文章于 2023-01-25 19:07:07 发布

阅读量115

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_39225682/article/details/108647617

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style lang="scss" scoped>
			.line {
				width: 100%;
				height: 15px;
				margin: 5px;
			}

			.public {
				width: 80px;
				height: 100%;
				display: inline-block;
				text-align: justify;
				vertical-align: top;
			}

			.public::after {
				content: "";
				display: inline-block;
				width: 100%;
				overflow: hidden;
				height: 0;
			}
		</style>
	</head>
	<body>
		<div class="line">
			<div class="public">姓名</div>
			<b>:</b>
			<b>李四</b>
		</div>
		<div class="line">
			<div class="public">身份证</div>
			<b>:</b>
			<b>111111111111</b>
		</div>
		<div class="line">
			<div class="public">手机号码</div>
			<b>:</b>
			<b>1313131313131</b>
		</div>
	</body>
</html>

实现的效果

小鬼bustern

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现单行文字两端对齐，例如要实现下列单行文字对齐

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style lang="scss" scoped> .line { width: 100%; height: 15px; margin: 5px; } .public { width: 80px; heigh.
复制链接

扫一扫