文字個數不一平均分佈,使標籤文字上下對齊
阿新 • • 發佈:2021-07-18
一般註冊登入註冊介面會用到,或者標題文字內容好看時
html如下
<div class="form-group"> <label class="control-label" for="signupform-username">使用者名稱</label> <input id="signupform-username" class="form-control" type="text" name="SignupForm[username]" /> </div> <div class="form-group"> <label class="control-label" for="signupform-nickname">暱稱</label> <input id="signupform-nickname" class="form-control" type="text" name="SignupForm[nickname]" /> </div> <div class="form-group"> <label class="control-label" for="signupform-password">密碼</label> <input id="signupform-password" class="form-control" type="password" name="SignupForm[password]" /> </div>
css如下
.control-label{ font-size: 14px; color: #333; width: 42px; height: 40px; line-height: 40px; margin-right: 15px; font-weight: 200; display: block; float: left; text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; } form-control{ padding: 11px 10px; max-height: 40px; background: #fff; border: 1px solid #E0E0E0; border-radius: 4px; font-size: 14px; width: 321px; color: #000;
display: block; position: relative; float: left; height: 16px; }
效果如圖
注意:標籤一定要有寬度才可以
主要用到的就是
text-align: justify; text-justify: distribute-all-lines; text-align-last: justify;