CSS——不确定长度的文本两端对齐

最新推荐文章于 2023-12-05 09:23:27 发布

YUHUI01

最新推荐文章于 2023-12-05 09:23:27 发布

阅读量638

点赞数 1

分类专栏： CSS 文章标签： css 文本对齐水平对齐垂直对齐

本文链接：https://blog.csdn.net/YUHUI01/article/details/108326716

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>domo</title>
    <style>
      div {
        width: 800px;
        height: 10px; /* div的实际高度为两倍 */
        line-height: 0px;
        text-align: justify;
        display: table-cell;
        vertical-align: middle;
      }
      div span {
        display: inline-block;
        padding-left: 100%;
        height: 0;
      }
    </style>
  </head>
  <body>
    <div>美好的一天又开始了<span></span></div>
  </body>
</html>

或者

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.item {
			width: 200px;
		}
		.item .label {
			display: inline-block;
			height: 100%;
			width: 56px;
			text-align: justify;
			vertical-align: middle;
		}
		.item .label::after {
				content: '';
				display: inline-block;
				width: 100%;
				height: 0;
			}
		.item .value {
			padding-right: 10px;
		}
	</style>
</head>
<body>
	<div class="item">
	    <span class="label">姓名</span>：
			<span class="value">小王</span>
	</div>
</body>
</html>