alinhamento CSS do texto de HTML elemento rádio ENTRADA

Question

I tem um elemento input[type="radio"] dentro de um contentor de bloco de largura fixa. O texto de apoio para o elemento <input/> não se encaixa em uma única linha, e cai para duas ou mais linhas. Por exemplo:

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>

Como eu seria capaz de estilo do elemento <input/> (ou seu texto) de tal forma que todas as outras linhas do texto cai começa no mesmo nível travessão da primeira linha faz? A primeira linha de texto tem que estar no mesmo nível vertical como o elemento <input/>.

Qualquer ajuda será muito apreciada.

Answer 1

O recipiente poderia usar padding esquerda positiva, e uma text-indent negativo.

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

Aqui está um exemplo

Answer 2

Aqui está uma opção:

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

Você liga a etiqueta em um elemento de bloco flutuante com uma margem esquerda.

Answer 3

Você pode alterar o nível vertical de entrada, alterando o top atributo no class ou id desse insumo, aqui o código é:

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