請教大家下，如果讓你將下面的HTML 代碼，通過CSS對齊成圖片所示樣子，你會怎么做呢？希望大家能集思廣益，多提提想法。效果圖：示例HTML：<form?action="#">????
<div>????
<label>請輸入郵箱地址</label>????
<input?type="text"?placeholder="這是一個文本輸入框"?/>????
</div>????
<span>郵箱地址請按要求格式輸入</span>????
<div>????
<label>請輸入密碼</label>????
<input?type="password"?placeholder="這是一個文本輸入框"?/>????
</div>????
<div>????
<label>請重復輸入密碼</label>????
<input?type="password"?placeholder="這是一個文本輸入框"?/>????
</div>????
<span>密碼請為6-16位英文數字</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"?/>運動????
<input?type="checkbox"?name="hobby"?/>藝術????
<input?type="checkbox"?name="hobby"?/>科學????
</div>????
<div>????
<label>個人描述</label>????
<textarea?placeholder="這是一個多行輸入框，輸入您的個人描述"></textarea>????
</div>????
<input?type="submit"?value="確認提交"?class="btn"?/>????
</form>
1 回答
逆光之羽
TA貢獻55條經驗 獲得超13個贊
<!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">請輸入郵箱地址</div><input?type="email"?placeholder="請按郵箱格式輸入文本"?required="required"/></label></p>
????<p><label><div?class="left">請輸入密碼</div><input?type="password"?placeholder="密碼請為6-16字母或數字"?required="required"?pattern="[A-Za-z0-9]{6,16}"/></label>
????</p>
????<p><label><div?class="left">請再次輸入密碼</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>運動
????????<input?type="checkbox"?value="1"></input>藝術
????????<input?type="checkbox"?value="2"></input>科學
????</p>
????<p>
????????<label><div?class="left">個人描述：</div></label>
????????<textarea?id="PD"></textarea>
????</p>
????<input?type="submit"?value="確認提交"/>
</form>
</body>
</html>直接用div設置下布局不就得了= =||
- 1 回答
- 0 關注
- 1657 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消