в HTML в форме, как я могу выровнять элементы ввода текста в одну строку?

Question

Здесь я пытаюсь добавить форму на веб-сайт, и в этом случае я сталкиваюсь с проблемой, как выровнять все элементы текстового поля в одну строку?

<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>

Answer 1

Два самых простых способа привести элементы в одну строку могут быть ...

... с HTML:
Удалите элементы <br> из вашего HTML. A <br> вставляет разрыв строки.
Подробнее об этом элементе в w3schools: https://www.w3schools.com/tags/tag_br.asp

Вот ваш код без <br>

    <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:
Вы также можете скрыть элемент <br> с помощью css.

Этот код CSS выбирает элементы <br> в ваша форма и скрывает их с помощью свойства display.

    form br {
      display: none;
    }

Рекомендация, не имеющая ничего общего с вашей проблемой:
Если вы решите свою проблему, я бы также хотел бы призвать вас использовать элемент <label> для вашего текста рядом с каждым вводом. Это помогает для лучшей доступности и других преимуществ. Подробнее об этом:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 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;
}