<!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;
width: 60px;
}