Подтвердить что ты не робот

CSS: Как изменить интервал между переключателем и текстом?

Как изменить интервал между переключателем и текстом?

У меня есть следующий HTML:

<input type="radio" name="beds" value="1" />1+
<input type="radio" name="beds" value="2" />2+

Что-то вроде этого рисунка:

o 1+ o 2+

Как изменить интервал между переключателем и текстом "1+"? Я бы хотел, чтобы текст был ближе к переключателю, но браузер вставляет некоторые из undefined дополнений между двумя элементами.

4b9b3361

Ответ 1

Многие элементы HTML имеют настройку по умолчанию. Вы можете переопределить это значение и установить его в 0. В вашем случае вы хотите reset margin-right на переключателе:

<input type="radio" name="beds" value="1" style="margin-right: 0" />1+

Возможно, вы захотите добавить его в таблицу стилей, чтобы он применим ко всем переключателям:

input[type="radio"] {
  margin-right: 0;
}

Ответ 2

Вам понадобится элемент label.

<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label>
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label>

Затем вы можете сделать это следующим образом:

label {
  margin-left: -3px;
}

Также обратите внимание на использование атрибута for для целей доступности.