je le suivant HTML généré automatiquement:Indentation étiquettes multilignes
Quelle est la façon conseillé, en utilisant le CSS, pour mettre en retrait l'étiquette pour qu'il y ait un espace blanc sous le bouton radio?
je le suivant HTML généré automatiquement:Indentation étiquettes multilignes
Quelle est la façon conseillé, en utilisant le CSS, pour mettre en retrait l'étiquette pour qu'il y ait un espace blanc sous le bouton radio?
label {
display: block;
margin-left: 20px;
}
input {
float: left;
margin-left: -20px;
margin-right: 7px;
}
Voici le violon: http://jsfiddle.net/hrfmt/. Jouez avec les valeurs.
EDIT:
Si tous les navigateurs dont vous avez besoin pour soutenir peuvent comprendre display: inline-block
, utiliser à la place de float
.
Vous avez laissé entendre qu'il est possible de faire avec 'display: inline-block', mais n'avez pas fourni d'exemple dans votre réponse. J'ai donc ajouté une réponse qui fait cela. – aross
label {
position:relative;
padding-left:20px;
display:block;
}
label input[type=radio] {
position:absolute;
top:4px;
left:0px;
}
Voici un exemple de la façon de le faire sans avoir recours à des flotteurs. Vous devrez faire de la magie avec des marges négatives avec cette approche.
input {
display: inline-block;
margin-right: -100px;
/* The 2 below properties are just for "correct" vertical placement of the button. */
margin-top: 5px;
vertical-align: top;
}
label {
display: inline-block;
margin-left: 100px;
margin-right: -100px;
}
div {
/* Just some spacing between the radio buttons. */
margin-bottom: 5px;
}
Si vous pouvez envelopper chaque entrée et jeu d'étiquettes dans une div, vous pouvez utiliser 'display: table-cell' pour mettre efficacement ces derniers dehors. Est-ce possible? –