如何使标签和文本框在同一行上

要在HTML中将标签（label）和文本框（input）放在同一行上，可以使用CSS来调整它们的布局。以下是一些常见的方法：

方法一：使用内联样式

你可以直接在HTML元素中使用内联样式来设置它们的显示方式为inline-block，这样它们就会在同一行显示。

<label for="username" style="display:inline-block; width:100px;">用户名:</label>
<input type="text" id="username" name="username" style="display:inline-block;">

方法二：使用外部CSS

创建一个外部CSS文件或者在<style>标签中定义样式，然后应用到相应的HTML元素上。

<style>
  .form-inline label {
    display: inline-block;
    width: 100px;
  }
  .form-inline input {
    display: inline-block;
  }
</style>

<div class="form-inline">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
</div>

方法三：使用Flexbox布局

Flexbox是一种强大的布局工具，可以轻松地实现元素的排列和对齐。

<style>
  .form-container {
    display: flex;
    align-items: center;
  }
  .form-container label {
    margin-right: 10px;
  }
</style>

<div class="form-container">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
</div>

方法四：使用Grid布局

CSS Grid布局也是一种现代的布局方式，可以非常灵活地控制元素的位置。

<style>
  .form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
</style>

<div class="form-grid">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
</div>