單行網頁文字如何在移動端實現兩端對齊？

用 戶 名：XXXX

密 碼：XXXX

確 認 密 碼：XXXX

興 趣 愛 好：XXXX

還有五個字：XXXXX

有時候還會碰上五個字的，類似上面這樣的情況下，有什麼好辦法了嗎。

---

可以通過after偽元素來實現

html

&
&開發&
&阿斯頓& & &
&開發商&
&阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓& & &
&開發周期&
&阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓阿斯頓& &

css

.small-unit{
padding: 10px 0;
}
.label{
position: absolute;
display: inline-block;
width: 4em;
height: 40px;
text-align: justify;
overflow: hidden;
}
.label:after{
display: inline-block;
content: "";
width: 4em;
height: 40px;
text-align: justify;
overflow: hidden;
}
.msg{
display: inline-block;
margin-left: 5em;
position: relative;
}
.msg:before{
content: "：";
position: absolute;
left: -1em;
}


最終效果圖：

具體的實現可以參考我這篇博客：單行文字兩端對齊：用css偽元素實現 · Jesse"s life

---

用 flexbox 根治一切布局問題

---

如果只是為了對齊與表單無關的話可以無視我了

-------------------------------------------------------

如果是為了做表單那麼移動端的話

建議用placeholder來代替input的標籤。

或者把標籤放在input的上邊，不然真的很佔地方

---

我也想支持belleve,可是現在不行。。。

uc安卓版目前對flexbox支持不好,預計16年能搞定。

---

是這個意思么....

這方法是之前從張鑫旭博客看到的

也可以利用 float: left + float: right 實現額...

------------------------------------------------------------------------------------- 修改後的

你這問題我還是沒明白啊.... 單行文字兩端對齊就可以滿足你的需求了, 外面套個兩列的 grid 不就行了? 是不是有些前提條件你沒描述出來額, 比如總寬度以及兩列的寬度, 是否是固定寬, 是否可變的?

另外, 你可以換一種表單布局... 就不需要解決這問題了..

---

display:table

display:table-cell

---

只是中文的話，全形空格搞上吧

---

推薦閱讀：