在表单中的 HTML 中，如何将输入文本元素对齐为一行？答案

【问题标题】：in HTML in a form how can I align input text elements into a one line?在表单中的 HTML 中，如何将输入文本元素对齐为一行？
【发布时间】：2020-07-09 16:13:16
【问题描述】：

我正在尝试将表单添加到网站中，在这种情况下，我面临的问题是如何将所有文本框元素对齐到一行？

<div>
  <form >
    name<input type="text" name="name"  id="name"><br>
    no of donuts you need <input type="text" name="number" id="number"><br>
    tax<input type="text" name="tax" id="tax"><br>
    total<input type="text" name="total" id="total"><br>
  </form>
</div>

【问题讨论】：

请提供一个最小的代码示例。否则你可以看看CSS Flexboxes 或CSS Float property
如果您希望它们都在一行中，请删除   元素，但这会使表单有些难看。

标签： html forms alignment

【解决方案1】：

将元素放在一行中的两种最简单的方法可能是......

...使用 HTML：
删除 HTML 中的   元素。   插入换行符。
w3schools 上有关此元素的更多信息：https://www.w3schools.com/tags/tag_br.asp

这是您的代码，没有  

    <div>
      <form >
        name<input type="text" name="name"  id="name">
        no of donuts you need <input type="text" name="number" id="number">
        tax<input type="text" name="tax" id="tax">
        total<input type="text" name="total" id="total">
      </form>
    </div>

...使用 CSS：
您还可以使用 css 隐藏   元素。

此 CSS 代码选择表单中的   元素并使用 display 属性隐藏它们。

    form br {
      display: none;
    }

与您的问题无关的建议：
如果您的问题得到了解决，我还想鼓励您在每个输入旁边的文本中使用 <label> 元素。这有助于更好的可访问性和其他优势。更多信息：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

【讨论】：

【解决方案2】：

在你的 css 中使用弹性框，就像下面的代码一样

   <div class="flex-container">
      <div>
         <label for="fname">name:</label>
         <input type="text" name="fname">
      </div>
      <div>
         <label for="dounuts">no of donuts you need:</label>
         <input type="text" name="donuts">
      </div>
      <div>
         <label for="tax">tax:</label>
         <input type="text" name="tax">
     </div>
     <div>
        <label for="total">Total:</label>
        <input type="text" name="total">
     </div>
 </div>

css如下

.flex-container {
  display: flex;
}

【讨论】：