首頁猿問如何讓input從右邊對齊

如何讓input從右邊對齊

JavaScript

qq_Dreamy_舊城_0 2017-07-04 10:50:13

這里是最原始的，我想讓他向右對齊//這里是我的代碼，下面加粗的部分是我從網上找到的一些代碼，但，沒用<body> <div class="container"> <h2 class="reg-top"></h2> <div class="reg-box"> <div class="main"> <h3>注冊賬號</h3> <form action="" method="post" class="reg-form"> <div class="reg-inpiut"> <label vertical-align:middle;display:inline-block;><i>*</i>  昵稱：</label>? <input type="text" id="uname" placeholder="英文，數字長度為6-10個字符" style="width: 200px;"/> </div> <div class="reg-inpiut"> <label vertical-align:middle;display:inline-block;><i>*</i>  密碼：</label> <input type="password" id="upass" placeholder="長度為6-16個字符" style="width: 200px;" vertical-align:middle;/> </div> <div class="reg-inpiut"> <label vertical-align:middle;display:inline-block;>手機號碼：</label> <input type="text" style="width: 200px;" vertical-align:middle;/> <span id="tel-tip">忘記密碼時找回密碼使用</span> </div> <div class="reg-inpiut"> <label vertical-align:middle;display:inline-block;><i>*</i>  郵箱：</label> <input type="email" style="width: 200px;"/> </div> <div class="reg-inpiut"> <label vertical-align:middle;display:inline-block;>年齡：</label> <input type="number" min="12"/> </div> <div class="submit-box"> <input type="submit" id="submit" value="立即注冊"/> </div> </form> </div> </div> </div> </body>

查看完整描述

2 回答

已采納

么我的北海

TA貢獻2條經驗獲得超3個贊

?<div?class="container">
????<h2?class="reg-top"></h2>
????<div?class="reg-box">
????<div?class="main">
????<h3?style="width:400px;text-align:center">注冊賬號</h3>
????<form?action=""?method="post"?class="reg-form">
????<div?class="reg-inpiut">
????<label?class="input-label"><i>*</i>昵稱：</label>?
????<input?type="text"?id="uname"?placeholder="英文，數字長度為6-10個字符"?style="width:?200px;"/>
????</div>
????<div?class="reg-inpiut">
????<label?class="input-label"><i>*</i>密碼：</label>
????<input?type="password"?id="upass"?placeholder="長度為6-16個字符"?style="width:?200px;"?vertical-align:middle;/>
????</div>
????<div?class="reg-inpiut">
????<label?class="input-label">手機號碼：</label>
????<input?type="text"?style="width:?200px;"?vertical-align:middle;/>
????<span?id="tel-tip">忘記密碼時找回密碼使用</span>
????</div>
????<div?class="reg-inpiut">
????<label?class="input-label"><i>*</i>郵箱：</label>
????<input?type="email"?style="width:?200px;"/>
????</div>
????<div?class="reg-inpiut">
????<label?class="input-label">年齡：</label>
????<input?type="number"?min="12"/>
????</div>
????<div?class="submit-box?reg-inpiut">
????<input?type="submit"?id="submit"?value="立即注冊"?style="margin-left:105px;"/>
????</div>
????</form>
????</div>
????</div>
</div>

.input-label{
????????display:?inline-block;
????????text-align:?right;
????????width:?100px;
????}
????.reg-inpiut{
????????height:?30px;
????????line-height:?30px;
????}
????.reg-inpiut?i{
????????color:?#f00;
????????vertical-align:?middle;
????????padding-right:?5px;
????}
????#tel-tip{
????????font-size:?12px;
????????color:?#f00;
????}