請(qǐng)教大家下，如果讓你將下面的HTML 代碼，通過(guò)CSS對(duì)齊成圖片所示樣子，你會(huì)怎么做呢？希望大家能集思廣益，多提提想法。效果圖：示例HTML：<form?action="#">????
<div>????
<label>請(qǐng)輸入郵箱地址</label>????
<input?type="text"?placeholder="這是一個(gè)文本輸入框"?/>????
</div>????
<span>郵箱地址請(qǐng)按要求格式輸入</span>????
<div>????
<label>請(qǐng)輸入密碼</label>????
<input?type="password"?placeholder="這是一個(gè)文本輸入框"?/>????
</div>????
<div>????
<label>請(qǐng)重復(fù)輸入密碼</label>????
<input?type="password"?placeholder="這是一個(gè)文本輸入框"?/>????
</div>????
<span>密碼請(qǐng)為6-16位英文數(shù)字</span>????
<div>????
<label>性別</label>????
<input?type="radio"?name="sex"?/>男????
<input?type="radio"?name="sex"?/>女????
</div>????
<div>????
<label>城市</label>????
<select>????
<option>北京</option>????
<option>上海</option>????
<option>廣州</option>????
<option>深圳</option>????
<option>杭州</option>????
<option>西安</option>????
</select>????
</div>????
<div>????
<label>愛好</label>????
<input?type="checkbox"?name="hobby"?/>運(yùn)動(dòng)????
<input?type="checkbox"?name="hobby"?/>藝術(shù)????
<input?type="checkbox"?name="hobby"?/>科學(xué)????
</div>????
<div>????
<label>個(gè)人描述</label>????
<textarea?placeholder="這是一個(gè)多行輸入框，輸入您的個(gè)人描述"></textarea>????
</div>????
<input?type="submit"?value="確認(rèn)提交"?class="btn"?/>????
</form>
1 回答
逆光之羽
TA貢獻(xiàn)55條經(jīng)驗(yàn) 獲得超13個(gè)贊
<!DOCTYPE?html>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<html>
<head>
????<title>Title</title>
????<style?type="text/css">
????.left{?width:?200px;float:left;text-align:right;padding-right:20px;}
????</style>
</head>
<body>
<form?action=""?method="post">
????<p><label><div?class="left">請(qǐng)輸入郵箱地址</div><input?type="email"?placeholder="請(qǐng)按郵箱格式輸入文本"?required="required"/></label></p>
????<p><label><div?class="left">請(qǐng)輸入密碼</div><input?type="password"?placeholder="密碼請(qǐng)為6-16字母或數(shù)字"?required="required"?pattern="[A-Za-z0-9]{6,16}"/></label>
????</p>
????<p><label><div?class="left">請(qǐng)?jiān)俅屋斎朊艽a</div><input?type="password"?placeholder="兩次輸入要一致哦"?required="required"
????????????????????????????pattern="[A-Za-z0-9]{6,16}"/></label></p>
????<p>
????????<lable><div?class="left">性別：</div></lable>
????????<input?type="radio"?name="sex"?id="sex"?value="0"/>男
????????<input?type="radio"?name="sex"?id="sex"?value="0"/>女
????</p>
????<p>
????????<lable><div?class="left">愛好：</div></lable>
????????<input?type="checkbox"?value="0"></input>運(yùn)動(dòng)
????????<input?type="checkbox"?value="1"></input>藝術(shù)
????????<input?type="checkbox"?value="2"></input>科學(xué)
????</p>
????<p>
????????<label><div?class="left">個(gè)人描述：</div></label>
????????<textarea?id="PD"></textarea>
????</p>
????<input?type="submit"?value="確認(rèn)提交"/>
</form>
</body>
</html>直接用div設(shè)置下布局不就得了= =||
添加回答
舉報(bào)
0/150
提交
取消