如何对齐表单
请教大家下，如果让你将下面的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>
Walk_浏览 1608回答 1
1回答
-
逆光之羽
<!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设置下布局不就得了= =||
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5