CSS實現左右對齊的3種方法

使用text-align:justify
text-align:justify 屬性是全相容的，使用它實現左右對齊，需要注意在模組之間添加[空格/分行符號/定位字元]才能起作用，同樣，實現文本對齊也是需要在字與字之間添加[空格/分行符號/定位字元]才能起作用。

HTML代碼

<p>模組內的元素之間為&nbsp;分隔，只支援webkit和Gecko核心瀏覽器</p>
<div class="demo"><a class="link" href="#none">10元</a>&nbsp;<a class="link" href="#none">20元</a>&nbsp;<a class="link" href="#none">30元</a>&nbsp;<a class="link" href="#none">50元</a>
</div>
<p>模組內的元素之間為分行符號</p>
<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>
<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>
<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>
*{margin:0;padding:0;}

/*
 說明：

 1.IE中要實現塊內單行左右對齊需要使用其私人屬性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;

使用box-pack:justify

box-pack是css3的新屬性，依賴於display:box(舊版彈性布局)，受box-orient影響，box-pack決定了子標籤 水平對齊的方式，可選值有start | end | center | justify。使用box-pack:justify來實現左右對齊非常簡單，代碼量也少。為了向前看齊，把display:flex(新版彈性布局) 也一起寫進去。
如果是做基於webkit核心的webapp開發和winphone IE10及以上。
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來實現左右對齊也十分簡單，只需要設定模組的個數跟column的列數一致即可，不 過它的自動適應方式跟使用box-pack還有有點差別，並不是很標準，像列與列的間距暫無法定義為百分比。值得高興的是目前支援所有進階瀏覽器，對 IE10的支援也良好，而IE9及以下版本不支援，webapp開發中，對於不需要相容winphone7手機(IE9)的需求來說，可以充分發揮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定義了對象的列數,例子中有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;
}