CSS выравнивание текста радиоэлемента HTML INPUT

Question

У меня есть элемент input[type="radio"] внутри контейнерного блока фиксированной ширины. Вспомогательный текст для элемента <input/> не помещается в одну строку и падает до двух или более строк. Например:

div.leftBlock {
  position: relative;
  float: left;
  width: 275px;
}

<div class="leftBlock">
  <input type="radio" name="foo" value="bar" id="option" /> This is a rather long supporting text that does not fit in one line.
</div>

Как бы я мог стилизовать элемент <input/> (или его текст) так, чтобы каждая вторая строка, в которую попадает текст, начиналась на том же уровне отступа, что и первая строка? Первая строка текста должна находиться на том же вертикальном уровне, что и элемент <input/>.

Любая помощь будет высоко ценится.

Answer 1

Контейнер может использовать положительное значение padding слева и отрицательное значение text-indent.

.leftBlock {
    padding-left: 20px;
    text-indent: -20px;
}
.leftBlock input {
    width: 20px;
}

Вот пример

Answer 2

Вот один из вариантов:

<style>
div.leftBlock {
    position:relative; 
    float:left; 
    width:275px;
} 

.radio {
    float: left;
}

.radio_label {
    display: block;
    margin-left: 1.5em;
}
</style>
<div class="leftBlock">
    <input type="radio" name="foo" value="bar" id="option" class="radio"/>
    <span class="radio_label">
    This is a rather long supporting text that does not fit in
    one line.
    </span>
</div>

Вы превращаете метку в элемент плавающего блока с левым полем.

Answer 3

Вы можете изменить вертикальный уровень ввода, изменив атрибут top в class или id этого ввода, здесь код:

<style type="text/css">
    .main {
        height:50px;
        line-height:50px;
        font-size:25px;
        position:relative;
    }

    .rd {
        position:inherit;
        top:-2px;
    }
</style>

<div id="main">
    <input type="radio" id="rd" />
    This is a rather long supporting text that does not fit in one line.
</div>