Как поставить ярлык и радиокружок в одной строке

Question

Я хочу, чтобы это выглядело так, как выглядит на картинке.

Я не могу поместить метку и радио "кружок" в одну строку.

Я пытался добавить класс ввода и установить float: left, но этоделает большое пространство между этими двумя.

<fieldset>
        <legend>Choose car rental</legend>
            <label>mini<input type="radio" name="carclass" value="mini" value="mini"></label>
            <label>economy<input type="radio" name="carclass" value="economy"></label>
            <label>compact<input type="radio" name="carclass" value="compact"></label>
            <label>SUV<input type="radio" name="carclass" value="suv"></label>
            <label>VAN<input type="radio" name="carclass" value="van"></label>
    </fieldset>
    <fieldset>
        <legend>Choose optional equupment</legend>
        <label>child seat<input type="checkbox" name="eq" value="seat"></label>
        <label>GPS<input type="checkbox" name="eq" value="GPS"></label>
        <label>DVD player<input type="checkbox" name="eq" value="dvd"></label>
    </fieldset>

Answer 1

Не обязательно использовать метку метки для радиополей.Попробуйте добавить свои радио поля следующим образом:

<fieldset>
  <legend>Choose car rental</legend>
  <input type="radio" name="carclass" value="mini"> Mini<br>
  <input type="radio" name="carclass" value="economy" checked> Economy<br>
  <input type="radio" name="carclass" value="compact"> Compact<br>
  <input type="radio" name="carclass" value="suv"> Suv<br>
  <input type="radio" name="carclass" value="van"> Van
</fieldset>

<fieldset>
  <legend>Choose optional equipment</legend>
  <input type="radio" name="eq" value="seat" checked> Seat<br>
  <input type="radio" name="eq" value="gps"> GPS<br>
  <input type="radio" name="eq" value="dvd"> dvd
</fieldset>
 

Если вам нужна кликабельная метка *1009* для выбора радиополя, тогда вам понадобятся метки с атрибутами for и добавлением атрибутов id кполя ввода.Как это:

<fieldset>
  <legend>Choose car rental</legend>
  <input type="radio" name="carclass" id="mini" value="mini">
  <label for="mini">Mini</label><br>
  <input type="radio" name="carclass" id="economy" value="economy" checked>
  <label for="economy">Economy</label><br>
  <input type="radio" name="carclass" id="compact" value="compact">
  <label for="compact">Compact</label><br>
  <input type="radio" name="carclass" id="suv" value="suv">
  <label for="suv">Suv</label><br>
  <input type="radio" name="carclass" id="van" value="van">
  <label for="van">Van</label>
</fieldset>

<fieldset>
  <legend>Choose optional equipment</legend>
  <input type="radio" name="eq" id="seat" value="seat" checked>
  <label for="seat">Seat</label><br>
  <input type="radio" name="eq" id="gps" value="gps">
  <label for="gps">GPS</label><br>
  <input type="radio" name="eq" id="dvd" value="dvd">
  <label for="dvd">dvd</label>
</fieldset>

Answer 2

Вы просто помещаете текст перед вводом, не используйте <br> теперь вы можете использовать их, если хотите, чтобы они были перенесены на дисплей набора полей: inline-flex, без нацеливания на метку или display: inline-block, и вы установите метку для отображения: block

label{display:block;}

<fieldset>
        <legend>Choose car rental</legend>
            <label><input type="radio" name="carclass" value="mini">mini</label>
            <label><input type="radio" name="carclass" value="economy">economy</label>
            <label><input type="radio" name="carclass" value="compact">compact</label>
            <label><input type="radio" name="carclass" value="suv">SUV</label>
            <label><input type="radio" name="carclass" value="van">VAN</label>
    </fieldset>
    <fieldset>
        <legend>Choose optional equupment</legend>
        <label><input type="checkbox" name="eq" value="seat">child seat</label>
        <label><input type="checkbox" name="eq" value="GPS">GPS</label>
        <label><input type="checkbox" name="eq" value="dvd">DVD player</label>
    </fieldset>

Answer 3

HTML

Поместите тег <input> перед тегом <label> и добавьте <br> после <label>

<input> <label></label> <br>

CSS

Основные стили:

input, label {height: [line-height]; line-height: [height]; vertical-align: middle}

Остальная часть CSS либо предлагается или требуется .Обязательные стили означают применение в текущем макете, поэтому он может работать, а может и не работать, в разных обстоятельствах.См. Комментарии в демонстрационной версии.

Кстати, когда <form> передается значение каждого элемента управления формы (например, <input>, <textarea>, <select> и т. Д.) С атрибутом [name],собрал, затем отправил на сервер.Группа переключателей обычно разделяет [name] из-за своего единственного характера (обычно может быть выбрано только одно радио), но если другие типы элементов управления формой разделяют [name], то значения будут собраны в массив с указанным [name].Ничего плохого в этом само по себе, но только к вашему сведению, поскольку флажки имеют одинаковые значения [name=eq].

/* Suggested */

:root {
  font: 400 16px/1.3 Verdana;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow-x: hidden;
  line-height: 1.3rem;
}

form {
  display: flex;
  flex-flow: row wrap;
}

fieldset {
  width: fit-content;
}


/* Required */

input,
label {
  display: inline-block;
  font: inherit;
  height: 1.3rem; /* Essential */
  line-height: 1.3rem;  /* Essential */
  vertical-align: middle;  /* Essential */
}

input {
  width: 1rem;
}

[type=radio] {
  vertical-align: bottom;
}

<form>
  <fieldset>
    <legend>Choose car rental</legend>
    <input type="radio" name="carclass" value="mini">
    <label>mini</label><br>
    <input type="radio" name="carclass" value="economy">
    <label>economy</label><br>
    <input type="radio" name="carclass" value="compact">
    <label>compact</label><br>
    <input type="radio" name="carclass" value="suv">
    <label>SUV</label><br>
    <input type="radio" name="carclass" value="van">
    <label>VAN</label><br>
  </fieldset>
  <fieldset>
    <legend>Choose optional equipment</legend>
    <input type="checkbox" name="eq" value="seat">
    <label>child seat</label><br>
    <input type="checkbox" name="eq" value="GPS">
    <label>GPS</label><br>
    <input type="checkbox" name="eq" value="dvd">
    <label>DVD player</label><br>
  </fieldset>
</form>

Answer 4

Вы можете добавить CSS, как это

fieldset label {
    display: block;
}

Answer 5

Вам нужно поставить <input> перед <label>, вот так:

<label>This is the label</label>
<input type="radio" name="radio" value="radio">

Если вы хотите, чтобы радио выбиралось при нажатии на ярлык, вы должны добавить идентификатор квведите и укажите этот идентификатор с помощью атрибута for.Вот так:

<label for="radio1">This is the label</label>
<input type="radio" name="radio" id="radio1" value="radio">

Если вы хотите, чтобы метка и радио были на отдельной линии, добавьте <br /> после <input>.