Как выровнять input ="radio" с их метками?

#css #html #vertical-alignment

#css #HTML #выравнивание по вертикали

Вопрос:

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

У меня следующая проблема. Я хочу, чтобы и метки, и входные данные были в одной строке: Да o Нет o (o символизирует входные данные).

Вот мой следующий код, обратите внимание, что я изменил свойство отображения label на встроенный блок:

 <div class="col-sm-3">
        <label>Yes</label>
        <input type="radio" name="yes/no" checked>
        <label>No</label>
        <input type="radio" name="yes/no" >
    </div>

Извините за ответы, хотя есть много похожих вопросов и ответов, но адаптировать их просто не получилось…

Ответ №1:

Если вы хотите, чтобы входные данные и метка были «выровнены по низу», попробуйте использовать vertical-align: text-bottom .

 input[type='radio'] {
  vertical-align: text-bottom;
  margin-bottom: 1px;
}
div {
  display: inline-block;
  border: 1px solid black;
}

 <div class="col-sm-3">
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

1. да, почти! Входные данные немного ниже меток, но это явно помогло. Как я мог это исправить?

2. @Anna Marie, я обновил ответ, не могли бы вы проверить его еще раз? Теперь я использую text-bottom вместо bottom, я также добавил небольшое поле

3. Это работает!! Мне нужно было только одно свойство? Сумасшедший :). Спасибо! Через 2 минуты я отмечу ваш ответ!

4. @Anna Marie, да, вам нужно только выровнять по вертикали: текст-снизу, затем вы можете добавить небольшое поле для корректировки, если это необходимо

Ответ №2:

Примените vertical-align: middle с margin-top: -1px к каждому входу [type=’radio’] :

 input[type='radio'] {
  margin-top: -1px;
  vertical-align: middle;
}

 <div class="col-sm-3">
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

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

 input[type='radio'] {
  margin-top: -1px;
  vertical-align: middle;
}

.col-sm-3 {
    position: relative;
    border: 1px solid;
}

.col-sm-3:after {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: black;
    top: 50%;
}

 <div class="col-sm-3">
    <label>Yes</label>
    <input type="radio" name="yes/no" checked>
    <label>No</label>
    <input type="radio" name="yes/no" >
</div>

Ответ №3:

Возможно, вам захочется обернуть свои <input> в <label> полях.

Пример:

 <div class="col-sm-3">
  <label>Yes
    <input type="radio" name="yes/no" checked>
  </label>
  <label>No
    <input type="radio" name="yes/no" >
  </label>
</div>

Эта реализация повысит доступность и удобство использования ваших входных данных и не требует никакого дополнительного css.