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

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

5 голосов
/ 14 марта 2019

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

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

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

<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 ]

4 голосов
/ 14 марта 2019

Если вы хотите, чтобы входы и метка были выровнены снизу, попробуйте использовать 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>
3 голосов
/ 14 марта 2019

Применить 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>
0 голосов
/ 30 марта 2019

Возможно, вы захотите добавить <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.

...