Блог

У меня есть следующий код в Angular:

 <div class="center" style="margin-top:50px;">
    <label class='input-w' for='start-date'>
      <span class='label'><b>Start Date</b></span>
      <input type="date" id="start-date" name="start-date" style="width: 200px;">
    </label>
    
    <label class='input-w' for='end-date' >
      <span class='label'><b>End Date</b></span>
      <input type="date" id="end-date" name="end-date" style="width: 200px;">
    </label>
    
</div>
 

Он производит этот результат:

Я не могу понять, как разделить этикетки и коробки. Мне нужно, чтобы они были на одной линии с некоторым промежутком между ними, чтобы начало было на полпути влево, а конец-на полпути вправо.

Флекс!

В классе center у вас может быть класс center—horizontal, который использует flex для выравнивания всего содержимого в строке. Возможно, вам потребуется изменить настройки элементов, чтобы входные данные находились за пределами меток.

Flex по умолчанию является строкой, поэтому вам не нужно определять это

Вот хороший ресурс для flexbox: https://flexboxfroggy.com/

 .center--horizontal {
  display: flex;
}
 

Дополнительно: Возможно, вам потребуется добавить некоторую маржу к одному из элементов, но это зависит только от того, какую маржу вы хотите. Всякий раз, когда я что-либо делаю с flex, я, как правило, помещаю детей в divs (иногда в этом нет необходимости, если вы выводите только один элемент), если вы объединяете несколько элементов вместе, это просто облегчает группировку элементов вместе

Вы могли бы добавить некоторую информацию о стиле css в свой код, добавить поля в свой код

<style> Добавьте раздел в свой код, если вы еще этого не сделали, и добавьте атрибут в свой и добавьте, сколько вы хотите. margin label

Это должно быть что-то вроде этого

 .input-w {
    margin: how much ever margin you want;
}