說到兩端對齊，大家并不陌生，在word、powerpoint、outlook等界面導航處，其實都有一個兩端對齊(分散對齊)的按鈕，平時使用的也不多，我們更習慣與左對齊、居中對齊、右對齊的方式來對齊頁面的文本或模塊。
響應式網(wǎng)頁設計出現(xiàn)以來，更多是使用百分比布自適應布局，特別是在移動端，兩端對齊的方式顯得越來越重要。那么，如何使用css實現(xiàn)兩端對齊，相信很多同學會文本對齊的text-align:justify，這是今天要講的其中一種方式，另外還有兩種更精彩的實現(xiàn)方式，請往下看~
下圖是需要實現(xiàn)的demo，取了寬度分別為320px、480px、640px下的截圖，也就是說再隨瀏覽器窗口寬度的調整，按鈕菜單高度不變，寬度會按比例自動適應，且左右兩端對齊：
目錄（更新于20161028）
方法一：使用text-align:justify
感謝join同學提供的方案，使用該方案可以做到兼容所有的瀏覽器，不過實現(xiàn)起來會比較復雜，而且?guī)в衕ack的味道
text-align:justify 屬性是全兼容的，使用它實現(xiàn)兩端對齊，需要注意在模塊之間添加[空格/換行符/制表符]才能起作用，同樣，實現(xiàn)文本對齊也是需要在字與字之間添加[空格/換行符/制表符]才能起作用
HTML：
<p>模塊內的元素之間為 分隔，只支持webkit和Gecko內核瀏覽器</p> <br /> <div class="demo"><a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div> <br /> <p>模塊內的元素之間為換行符</p> <br /> <div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div> <br /> <p>模塊內的元素之間為空格符</p> <br /> <div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div> <br /> <p>模塊內的元素之間為無分隔符，justify不起作用</p> <br /> <div class="demo"><a class="link" href="#none">選項1</a><a class="link" href="#none">選項2</a><a class="link" href="#none">選項3</a><a class="link" href="#none">選項4</a></div> <br />
CSS:
*{margin:0;padding:0;} /* 說明： 1.IE中要實現(xiàn)塊內單行兩端對齊需要使用其私有屬性text-align-last:justify配合，text-align-last 要生效，必須先定義text-align 為justify 2.line-height:0 解決標準瀏覽器容器底部多余的空白 */ .demo{ text-align:justify; text-align-last:justify; line-height:0; height:44px; } /* 說明： 模塊使用[換行符]或[空格符]后，webkit瀏覽器中會引起最后一個模塊有多余空白，使用font-size:0可清除該空格 */ @media all and (-webkit-min-device-pixel-ratio:0){ .demo{ font-size:0; } } /* 說明： 1.text-align-last:justify 目前只有IE支持，標準瀏覽器需要使用 .demo:after 偽類模擬類似效果 2.opera瀏覽器需要添加 vertical-align:top 才能完全解決底部多余的空白 */ .demo:after{ display:inline-block; overflow:hidden; width:100%; height:0; content:''; vertical-align:top; } .demo a{ width:20%; display:inline-block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; font-size:16px; margin-bottom:5px; border-radius:3px; background-color:#fefefe; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee)); color:#666; text-decoration:none; }
方法二：使用justify-content:space-between
box-pack是css3的新屬性，依賴于display:box(舊版彈性布局)，受box-orient影響，box-pack決定了子標簽水平對齊的方式，可選值有start | end | center | justify。使用box-pack:justify來實現(xiàn)兩端對齊非常簡單，代碼量也少。為了向前看齊，把display:flex(新版彈性布局)也一起寫進去~
如果是做基于webkit內核的webapp開發(fā)和winphone IE10及以上，那么一切都好辦~
關于盒模型布局的介紹，這里有篇文章《CSS box-flex屬性，然后彈性盒子模型簡介》，寫得不錯，推薦給大家~
HTML：
<div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div>
CSS：
*{margin:0;padding:0;} /* 說明： display:box定義布局為盒模型后，可使用盒模型下的box-pack:justify屬性 */ .demo{ 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; } .demo a{ width:20%; display:block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; font-size:16px; margin-bottom:5px; border-radius:3px; background-color:#fefefe; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee)); color:#666; text-decoration:none; }
方法三：使用column(多列布局)
column也是是css3的屬性，意思是多列布局，使用column來實現(xiàn)兩端對齊也十分簡單，只需要設置模塊的個數(shù)跟column的列數(shù)一致即可，不過它的自動適應方式跟使用box-pack還有有點差別，并不是很標準，像列與列的間距暫無法定義為百分比。值得高興的是目前支持所有高級瀏覽器，對IE10的支持也良好，而IE9及以下版本不支持，webapp開發(fā)中，對于不需要兼容winphone7手機(IE9)的需求來說，可以充分發(fā)揮column的強大作用~
HTML：
<div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div>
CSS：
*{margin:0;padding:0;} /* 說明： 1.column-count定義了對象的列數(shù),例子中有4個模塊，那么定義為4列 2.column-gap定義了對象中列與列的間距，間距不能設置為百分比，顯得不夠靈活 */ .demo{ -webkit-column-count:4;-moz-column-count:4;column-count:4; -webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px; } .demo a{ display:block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; font-size:16px; margin-bottom:5px; border-radius:3px; background-color:#fefefe; background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee)); color:#666; text-decoration:none; }
移動端文本兩端對齊示例
text-justify示例（補充于：20160407）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本2端對齊</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;}
.list {
padding: 0 20px;
margin: 20px auto;
}
.list li {
height: 40px;
line-height: 40px;
border-bottom: 1px #000 solid;
padding: 0 20px;
overflow: hidden;
}
.list li .text {
display: inline-block;
width: 90px;
height: 40px;
margin-right: 15px;
float: left;
text-align:justify;
text-align-last:justify;
height:44px;
font-size: 12px;
}
.list li .text:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
</style>
</head>
<body>
<ul class="list">
<li>
<span class="text">銀 行 卡 號</span>
<input type="text" placeholder="請輸入銀行卡號"/>
</li>
<li>
<span class="text">卡 號</span>
<input type="text" placeholder="請輸入卡號"/>
</li>
<li>
<span class="text">電 話 號</span>
<input type="text" placeholder="請輸入電話號"/>
</li>
<li>
<span class="text">身 份 證 地 址</span>
<input type="text" placeholder="請輸入身份證地址"/>
</li>
</ul>
</body>
</html>
justify-content:space-between示例（補充于：20160628）
<!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>聯(lián)</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">廣東省 深圳市 南山區(qū) 科技一路1108號騰訊大廈1樓</div>
</li>
<li class="plist-li">
<div class="l"><span>郵</span><span>編：</span></div>
<div class="r">李振</div>
</li>
</ul>
</body>
</html>
林小志大神的解決方案（補充于：20160628）
微信群里發(fā)了一下，得到了好多想法，果然技術這東西是需要點交流啊。
上面的截圖就是妹紙在群里問的，然后我的想法就是，如果里面的數(shù)字我們不寫死位置，而是根據(jù)數(shù)量不同怎么去等分來排列。就像這樣：
在不改變 CSS 的前提下，隨意增加里面的數(shù)字，然后就自己跑到相對應的位置去，就像這樣：
初看一下，感覺好像要去計算似的，其實并不用，只需要考慮兩端對齊就可以了，畢竟在 CSS 中有不少屬性是用來做兩端對齊的。對于新的屬性我并不熟悉，通過這次在微博和微信群里得瑟，我才發(fā)現(xiàn)其實還有一些屬性曾經(jīng)看過，但是考慮是比較新的東西也沒怎么仔細了解，唉，倍感自己的無知啊，感謝各位同行。
首先我考慮到的就是文本的兩端對齊，對于 HTML 元素只要是 inline 或者 inline-block 的話，也可以這么操作，所以我用到的兩個相對比較重要的 CSS 屬性是：
-
text-align: justify;
-
display: inline-block;
先看一下我的 HTML 結構：
這里有一個 IE 的條件注釋，后續(xù)提一下為什么要用這個，從注釋內容上來看，各位應該知道這個是給 IE7 以及 IE7 以下的瀏覽器的。其實就是 IE7 和 IE6，但事實上完全沒這個必要，現(xiàn)在還有多少人這兩個瀏覽器呢，^o^，我們也不玩的，不信你看：
然后接下來就是 CSS 樣式部分的內容了
這個是外層的樣式，隨便給一個寬度，這并不是重點，反正是兩端對齊了，只要能容納得下里面的元素就夠了。
這里的 i 標簽元素就直接略過了，沒啥東西，主要就是稍微修飾一下數(shù)字，然后 :after 這里呢有兩個作用：
-
那條橫線；
-
影響兩端對齊的關鍵因素；
可能會有人疑惑那個 .step b 選擇符是做什么用，其實也沒什么，在 HTML 結構里不是寫了考慮 IE7-6 的標簽么，所以這里就對這個 b 標簽也同時作用一下這個樣式咯。
那么在 IE6 中的截圖就是這樣了，圓角肯定是沒有了：
這樣就已經(jīng)把最終我想要的效果寫完了，寫完之后發(fā)覺其實真沒什么技術含量存在，而且在網(wǎng)絡上也有人對兩端對齊有了相對比較詳細的介紹
在這個 HTML 結構中需要注意的地方主要就是 i 標簽之間需要有一個間隔存在，換行也好，空格也好，只要隔開 i 標簽就是了，要不最終在瀏覽器中顯示出來后，可能會讓瀏覽器以為是一個單詞。如果是一個單詞，總不可能強行拆開來去做兩端對齊啊，是吧。
最后，我在想，如果現(xiàn)在的登錄注冊窗口中有“用戶名”、“密碼”之類的文案，需要兩端對齊的話，是不是也可以這樣做呢？我只是在想，在想而已，我沒試過……
ok~
以上3種實現(xiàn)方式各有優(yōu)缺點，具體看實際項目使用，如果大家有更好的實現(xiàn)方式，歡迎留言探討~
