Alignement CSS du texte de l'élément radio HTML INPUT

Question

J'ai un élément input[type="radio"] dans un conteneur de bloc de largeur fixe. Le texte de prise en charge de l'élément <input/> ne tient pas dans une seule ligne et passe à deux lignes ou plus. Par exemple:

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>

Comment pourrais-je styler l'élément <=> (ou son texte) de telle sorte que toutes les lignes du texte tombent au même niveau de retrait que la première ligne? La première ligne de texte doit être au même niveau vertical que l'élément <=>.

Toute aide sera très appréciée.

Answer 1

Le conteneur peut utiliser une gauche positive padding et un négatif text-indent.

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

Voici un exemple

Answer 2

Voici une option:

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

Vous transformez l'étiquette en un élément de bloc flottant avec une marge gauche.

Answer 3

vous pouvez changer le niveau d'entrée vertical en modifiant l'attribut top dans le class ou id de cette entrée, ici le code est:

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