主要屬性:
text-align: justify;
text-align-last: justify; 參見https://www.css88.com/book/css/properties/text/text-align-last.htm
最終效果:
代碼:
<ul class="g-formlist">
<li>
<label class="mark">姓 名</label>
<div class="write">
<input type="text" id="form-name" class="g-text-entry" placeholder="請輸入4-10字符" />
<span class="tip" data-initial="請輸入4-10字符"></span>
</div>
</li>
<li>
<label class="mark">密 碼</label>
<div class="write">
<input type="text" id="form-psw" class="g-text-entry" placeholder="請輸入6-30字符" />
<span class="tip" data-initial="請輸入6-30字符"></span>
</div>
</li>
<li>
<label class="mark">確 認 密 碼</label>
<div class="write">
<input type="text" id="form-repsw" class="g-text-entry" placeholder="請再輸入一遍密碼" />
<span class="tip" data-initial="請輸入6-30字符"></span>
</div>
</li>
<li>
<label class="mark">驗 證 碼</label>
<div class="write">
<input type="text" id="form-imgcode" class="g-text-entry disabled" disabled="disabled" placeholder="輸入驗證碼" />
<span class="tip" data-initial="請輸入驗證碼"></span>
</div>
</li>
</ul>
li {
clear: both;
list-style: none;
}
.mark {
display: block;
float: left;
overflow: hidden;
width: 78px;
height: 29px;
padding-right: 10px;
text-align: justify;
text-align-last: justify;
line-height: 2;
}
注意:
英文字符和數字不會兩端對齊