當涉及到表單的時候,很多文字字段不一樣長短,這個時候需要兩端對齊
如下圖 所示
=====================
開始使用letter-spacing這樣每個的去調試,很繁瑣
使用空格也一個個的去實現,敲打
兩個文字的中間的空格,可以使用"全角空格",但是3個文字的又不行了
這個時候想到了text-align: justify;
遂使用它
------------------------------------html-------------------------------------------------
<li>
<span>銀行卡號</span><input type="text" placeholder="請輸入銀行卡號"/>
</li>
<li>
<span>卡 號</span><input type="text" placeholder="請輸入卡號"/>
</li>
html結構代碼按照常規的這樣寫
----------------------------------css------------------------------------------------------
.list li span {
display: inline-block;
text-align: justify;
width: 70px;
height: 40px;
margin-right: 15px;
float: left;
}
.list li span:after {
content: '';
display: inline-block;
width: 100%;
}
給s文字包裹的span這個標簽設置塊元素,給個最大寬度.添加text-align: justify;為了兩端對齊
同時span:after 設置代碼,並且給span設置浮動,為了后邊的input元素可以顯示在 同一行中
下載地址:http://files.cnblogs.com/files/leshao/%E4%B8%A4%E7%AB%AF%E5%AF%B9%E9%BD%90text-align%E5%AE%9E%E7%8E%B0.rar
但是這個只是兼容高級版本瀏覽器及手機客戶端,兼容蘋果,三星,小米,但是不兼容華為等
---------------------------------------------------------------------------------------------
下面第二種方法
為了兼容很多主流機型,采取display:flex盒模型的布局
-----------------------------------------------------------------
<li>
<span><i>銀</i><i>行</i><i>卡</i><i>號</i></span><input type="text" placeholder="請輸入銀行卡號" />
</li>
給每一個字段里面的文字添加一個標簽
---------------------------------------------------------------
.list li span {
width: 70px;
height: 40px;
margin-right: 15px;
float: left;
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;
}
.list li span i{
width: 22px;
height: 40px;
display: block;
text-align: center;
}
塊元素顯示包裹標簽的文字,display: block;
下載地址址:http://files.cnblogs.com/files/leshao/%E4%B8%A4%E7%AB%AF%E5%AF%B9%E9%BD%90%E6%97%A0%E5%86%92%E5%8F%B7%E5%B1%85%E4%B8%AD.rar
------------------------------------------------------------------
這是這樣不添加冒號的情況下
如果 字段后面有冒號
<li>
<span><i>銀</i><i>行</i><i>卡</i><i>號</i><i>:</i></span><input type="text" placeholder="請輸入銀行卡號" />
</li>
冒號的字節和文字不一樣,顯示的也不是很對齊
這個時候可以給最后的冒號設置
.list li span i:last-child{
text-align: right;
}
給前面的字段文字設置text-align: right;右對齊顯示
.list li span i{
width: 22px;
height: 40px;
display: block;
text-align: right;
}
--------------------------------------
一般前衛的設計師會設計到左對齊,或者右對齊顯示的.文字兩端對齊是過去的思想了
全角空格,添加標簽,letter-spacing去實現
其實如果設計稿是左對齊,或者右對齊,就最簡單了