请教大家下，如果让你将下面的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 关注
- 1607 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消