如何让表单文本框左边标签文本右对齐---label

最新推荐文章于 2023-11-20 16:29:02 发布

Ashe And Wine

最新推荐文章于 2023-11-20 16:29:02 发布

阅读量2.9w

点赞数 9

分类专栏： web前端文章标签：表单标签布局

本文链接：https://blog.csdn.net/asheandwine/article/details/78148802

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

当我们设计表单文本框布局时，希望布局好看。前边的文字与文本框契合完美。文字上下行对齐。
通常使用 <table> 标签实现代码。其实也可以用 <label> 标签实现
下边是一个例子如何修改css实现文本框和前边字体右对齐。

HTML代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>  
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}  
form div { margin:5px 0;}  
.int label {  width:100px; float:left; text-align:right; }  
.int input {  padding:1px 1px; border:1px solid #ccc; height:16px;}
.sub { padding-left:100px;}  
.sub input { margin-right:10px; }  
  
</style>
</head>

<body>
<form method="post" action="">
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="usrname" class="required" >
</div>

<div class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required" >
</div>

<div class="int">
<label for="personinfo">个人资料：</label>
<input type="text" id="personinfo">
</div>

<div class="sub">
<input type="submit" value="提交" id="send" >
<input type="reset" id="res">
</div>
</form>

</body>
</html>

结果图：

该例是将label这个“容器”变宽。使得其可以任里边的字体自由移动。
该例中<label>中加入文本框前边的字体，将 label 标签设置宽度，

使label宽度足够宽而不会根据<label>标签中字体个数的填充而改变宽度。
再用 text-align 属性设置 label 标签中的字体右对齐。

注意如果仅仅设置了<label>标签的宽度，而不设置其左浮动 float:left ，则不会实现最后的效果。

Ashe And Wine

关注

9
点赞
踩
42

收藏

觉得还不错? 一键收藏
2
评论
如何让表单文本框左边标签文本右对齐---label

当我们设计表单文本框布局时，希望布局好看。前边的文字与文本框契合完美。文字上下行对齐。通常使用标签实现代码。其实也可以用标签实现下边是一个例子如何修改css实现文本框和前边字体右对齐。HTML代码：无标题文档 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} form
复制链接

扫一扫