Разделение 2 входных тегов, отображаемых рядом с помощью `float: left`

Question

Я использовал это float: left на первом div, чтобы и метки, и теги ввода отображались рядом.Но из-за этого теперь нет места между ними.Я пробовал поля и отступы, но не смог разделить их.

<div style="float:left;">
            <label for="title">Title</label>
            <input style="height: 34px; width: 310px;" type="text" name="title">
        </div>
        <div>
            <label for="name">Name<label style="color: red;">*</label></label>
            <input style="height: 34px; width: 310px;" type="text" name="name" required>
        </div><br>

Есть ли другой способ сделать это?

Answer 1

Лучшим способом достижения желаемого результата было бы использование «display: inline-block» на каждом элементе div вместо использования «float».

<div style="display:inline-block">
        <label for="title">Title</label>
        <input style="height: 34px; width: 310px;" type="text" name="title">
    </div>
    <div style="display:inline-block">
        <label for="name">Name<label style="color: red;">*</label></label>
        <input style="height: 34px; width: 310px;" type="text" name="name" required>
    </div><br>

Вы можете найти больше информации об использовании inline-блоков против float здесь:
Преимущества использования display: inline-block против float: left в CSS

Answer 2

Это будет просто работать, чтобы просто дополнить одну сторону ваших div-ов. Вот пример очищенного кода:

.left {
  float: left;
}
input {
  height: 34px;
  width: 150px;
}
.req {
  color: red;
}
.input-wrapper {
  padding-right: 20px;
}

<div class="input-wrapper left">
  <label for="title">Title</label>
  <input type="text" name="title" />
</div>
<div class="input-wrapper left">
  <label for="name">Name<span class="req">*</span></label>
  <input type="text" name="name" required />
</div>

Я уменьшил ширину полей ввода, чтобы проиллюстрировать, что они действительно располагаются рядом друг с другом в этом формате, создавая необходимое разделение.

Также обратите внимание, что вы не должны вкладывать ярлык в ярлык. Если вы хотите включить что-то вроде обязательной полевой записи, используйте вместо нее что-то вроде span. Либо это, либо добавьте «обязательный» класс к этой метке, и стиль псевдо-селектора ::after.