CSS中对齐元素是一项非常基础和常见的操作,常用于实现页面的准确布局和对齐设置。在此背景下,让我们来探讨CSS中如何对两个input进行对齐的问题。HTML代码: <div class=
CSS中对齐元素是一项非常基础和常见的操作,常用于实现页面的准确布局和对齐设置。在此背景下,让我们来探讨CSS中如何对两个input进行对齐的问题。
HTML代码:
<div class="form-group">
<label>账号:</label>
<input type="text" id="username" name="username">
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" id="password" name="password">
</div>
CSS代码:
.form-group{
width: 300px;
margin-bottom: 10px;
}
.form-group label{
display: inline-block;
width: 80px;
text-align: right;
margin-right: 10px;
}
.form-group input{
display: inline-block;
width: 180px;
height: 30px;
border: 1px solid #ddd;
padding: 5px;
box-sizing: border-box;
}
上述代码中的HTML部分包含了两个input标签,我们分别给他们加上了id和name属性,并且将他们包在了form-group的div中。
在CSS中,我们设置了form-group类的宽度为300px,并将其中的标签元素们设置为行内块,使它们在同一行中显示,并且在label标签中设置了宽度、右对齐以及右边的10px的外边距,以便为input留出空间。
接下来,我们在input标签中指定了display属性为行内块,并用width和height属性设置了尺寸,通过设置边框和内边距使input框看上去像是一个整体,最后通过设置box-sizing属性,实现盒模型的计算方式。
最终的效果是,我们成功地对两个input进行了对齐,并且这种设置方式就可以应用于多个表单项目上,使我们的网站具有高水平的UI体验。
粉丝
0
关注
0
收藏
0