編碼的世界 / 優質文選 / 生涯

css解決含不同字數的相同寬度的多個盒子，自動排列對齊（基礎實用）

2022年7月17日
-

<!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;
}

編碼的世界 / 優質文選 / 生涯

css解決含不同字數的相同寬度的多個盒子，自動排列對齊（基礎實用）

熱門文章