CSS 表单组中标签和输入框在同一行

在本文中，我们将介绍如何使用CSS将标签和输入框置于同一行的表单组中，并提供示例说明。

阅读更多：CSS 教程

使用CSS Flexbox

Flexbox是一种CSS布局模型，可以有效地对齐和布局HTML元素。通过使用Flexbox，我们可以轻松地将标签与输入框置于同一行。

首先，我们创建一个HTML表单，并为标签和输入框添加相应的class。以下是一个简单的例子：

<form>
  <div class="form-group">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
  </div>
</form>

接下来，我们使用Flexbox布局将标签和输入框放在同一行。给form-group类添加以下CSS样式：

.form-group {
  display: flex;
  align-items: center;
}

这个CSS样式指定form-group类使用Flexbox布局，并将元素垂直居中。

通过使用这个CSS样式，标签和输入框将出现在同一行，并且对齐方式将基于align-items属性的设置。

使用CSS Grid

CSS Grid是另一种强大的CSS布局模型，它提供了更灵活的布局选项。我们可以使用CSS Grid将标签和输入框置于同一行。

首先，我们为表单组的父容器添加一个class，并为标签和输入框添加相应的class。以下是一个示例：

<form>
  <div class="form-grid">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
  </div>
</form>

接下来，我们使用CSS Grid布局将标签和输入框放在同一行。给form-grid类添加以下CSS样式：

.form-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

这个CSS样式指定form-grid类使用CSS Grid布局，并设置了两个列，第一个列的宽度将根据内容自动调整，第二个列将填充剩余的可用空间。 align-items属性用于将元素垂直居中。

通过使用这个CSS样式，标签和输入框将出现在同一行，并且对齐方式将基于align-items属性的设置。

自定义宽度

有时候，我们可能需要自定义标签和输入框的宽度。我们可以使用CSS的width属性来实现这一点。

以下是一个示例，展示了如何将标签设置为固定宽度，而将输入框占据剩余的可用空间：

<form>
  <div class="form-group">
    <label for="name" class="label">姓名：</label>
    <input type="text" id="name" name="name" class="input">
  </div>
</form>

.label {
  width: 100px;
}

.input {
  width: calc(100% - 100px);
}

这个示例中，通过为标签添加label类和为输入框添加input类，我们可以分别为它们设置不同的宽度。 label类设置为固定宽度100px， input类通过使用calc()函数将宽度设置为剩余空间。

总结

通过使用CSS的Flexbox和Grid布局，我们可以轻松将标签和输入框置于同一行的表单组中。我们可以通过设置align-items属性来控制对齐方式，也可以使用width属性来自定义宽度。根据具体的布局需求，可以选择适合的方法来实现表单组中的标签和输入框的同行显示。