HTML/CSS:如何让某些输入域在表单的同一行上？

<style>
  .form-field {
    float: left;
    width: 30%; /* 根据实际需求设置宽度 */
    margin-right: 10px; /* 设置输入域之间的间距 */
  }
  .clear {
    clear: both; /* 清除浮动 */
  }
</style>

<div class="form-field">
  <label for="input1">输入域1：</label>
  <input type="text" id="input1">
</div>

<div class="form-field">
  <label for="input2">输入域2：</label>
  <input type="text" id="input2">
</div>

<div class="clear"></div>

<style>
  .form-field {
    display: inline-block;
    width: 30%; /* 根据实际需求设置宽度 */
    margin-right: 10px; /* 设置输入域之间的间距 */
  }
</style>

<div class="form-field">
  <label for="input1">输入域1：</label>
  <input type="text" id="input1">
</div>

<div class="form-field">
  <label for="input2">输入域2：</label>
  <input type="text" id="input2">
</div>

<style>
  .form-container {
    display: flex;
  }
  .form-field {
    flex: 1; /* 设置输入域的宽度比例，根据实际需求调整 */
    margin-right: 10px; /* 设置输入域之间的间距 */
  }
</style>

<div class="form-container">
  <div class="form-field">
    <label for="input1">输入域1：</label>
    <input type="text" id="input1">
  </div>
  
  <div class="form-field">
    <label for="input2">输入域2：</label>
    <input type="text" id="input2">
  </div>
</div>