表单元素内部对齐

最新推荐文章于 2023-08-02 10:48:02 发布

最帅程序员

最新推荐文章于 2023-08-02 10:48:02 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_40222803/article/details/78038802

版权

看代码就可以了

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

<!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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
表单元素内部对齐

看代码就可以了表单对齐 /*label{display: inline-block;width: 100px;text-align: right;margin-right: 20px;margin-bottom: 20px;}*/ /*label是行内元素在这里的用法类似于span标签转化为行内块行内右对齐即可但是表单元素自身有很多bug inp
复制链接

扫一扫