[分享]css两个input对其

CSS中对齐元素是一项非常基础和常见的操作，常用于实现页面的准确布局和对齐设置。在此背景下，让我们来探讨CSS中如何对两个input进行对齐的问题。HTML代码： 账号： 密码： CSS代...

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体验。