css解决含不同字数的相同宽度的多个盒子，自动排列对齐（基础实用）

如梦难醒

已于 2022-11-28 10:00:05 修改

阅读量6.8k

点赞数 4

于 2018-01-05 14:02:29 首次发布

本文链接：https://blog.csdn.net/high_height/article/details/78980627

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本2端对齐 - flex</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style type="text/css">

*{padding: 0;margin: 0;}
html,body{height: 100%}
ul{list-style: none;}
.plist {
position: relative;
padding: 9px 15px;
background-color: #fff;
}
.plist .plist-li {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 15px;
line-height: 27px;
}
.plist .plist-li .l {
width: 90px;
white-space: nowrap;
color: #888888;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.plist .plist-li .l > span {
display: block;
}
.plist .plist-li .r {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
color: #333333;
}
</style>
</head>
<body>

<ul class="plist">
<li class="plist-li">
<div class="l"><span>商</span><span>户</span><span>名</span><span>称：</span></div>
<div class="r">麦当劳</div>
</li>
<li class="plist-li">
<div class="l"><span>服</span><span>务</span><span>商</span><span>名</span><span>称：</span></div>
<div class="r">李振</div>
</li>
<li class="plist-li">
<div class="l"><span>对</span><span>接</span><span>BD：</span></div>
<div class="r">李振</div>
</li>
<li class="plist-li">
<div class="l"><span>铺</span><span>设</span><span>门</span><span>店：</span></div>
<div class="r">1000家</div>
</li>
<li class="plist-li">
<div class="l"><span>收</span><span>件</span><span>人：</span></div>
<div class="r">张扬</div>
</li>
<li class="plist-li">
<div class="l"><span>联</span><span>系</span><span>电</span><span>话：</span></div>
<div class="r">123456789</div>
</li>
<li class="plist-li">
<div class="l"><span>收</span><span>货</span><span>地</span><span>址：</span></div>
<div class="r">广东省深圳市南山区科技一路1108号腾讯大厦1楼</div>
</li>
<li class="plist-li">
<div class="l"><span>邮</span><span>编：</span></div>
<div class="r">李振</div>
</li>
</ul>

</body>

</html>

效果如下图：

！！！！更新一波，新的属性，可以直接实现不同字数行自动左右对齐的！！

就是：text-align: justify,简单的伪代码如下：

<div>
    <p>张三</p>
    <p>夏侯惇</p>
    <p>欧阳大侠</p>
</div>



style:

div p{
    text-align: justify;
    text-justify: distribute-all-lines; /*ie6-8*/
    text-align-last: justify; /* ie9*/
    -moz-text-align-last: justify; /*ff*/
    -webkit-text-align-last: justify; /*chrome 20+*/
    width: 60px;
}

如梦难醒

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
css解决含不同字数的相同宽度的多个盒子，自动排列对齐（基础实用）

文本2端对齐 - flex *{padding: 0;margin: 0;}html,body{height: 100%}ul{list-style: none;}.plist { position: relative; padding: 9px 15px; background-color: #fff;}.plist .plist-
复制链接

扫一扫