看代码就可以了
看了觉得不错 可以留一个脚印 评论下 谢谢鼓励
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单对齐</title>
<style type="text/css">
/*label{display: inline-block;width: 100px;text-align: right;margin-right: 20px;margin-bottom: 20px;}*/
/*label是行内元素 在这里的用法类似于span标签 转化为行内块 行内右对齐即可
但是表单元素自身有很多bug input标签默认中对齐 同时有默认高度 所以margin对齐不怎么好调整
最好的办法就是选用浮动 可以避免padding margin不好调整的问题*/
.form-group{overflow: hidden;}
.form-group label{float:left;width: 100px;text-align: right;margin-right: 20px;margin-bottom: 20px;}
.form-group input{float:left;}
.form-group span{float:left;}
.form-radio input{margin: 0;}
</style>
</head>
<body>
<fieldset><!-- fieldset必须配合legend使用 一个fieldset只可以包含一个legend -->
<legend>标题</legend>
<div class="div-group">
<form class="form-group">
<label for="">用户名</label>
<input type="text">
<span>组丢哦啊</span>
</form>
<form class="form-group">
<label for="">用户啊名</label>
<input type="text">
<span>最多色块</span>
</form>
<form class="form-group">
<label for="">用户名啊啊</label>
<input type="text">
<span>最多色块</span>
</form>
<form class="form-group">
<label for="">户名</label>
<input type="text">
<span>最多色块</span>
</form>
<form class="form-group form-radio">
<label for="">户名</label>
<input type="radio">
<span>最多色块</span>
</form>
</div>
</fieldset>
</body>
</html>