表单元素内部对齐

来源：互联网发布：淘宝如何上传历史宝贝编辑：程序博客网时间：2024/06/06 23:44

看代码就可以了

看了觉得不错可以留一个脚印评论下谢谢鼓励

<!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>

阅读全文

0 0

表单 元素内部对齐

看代码就可以了

表单元素内部对齐