Discussion :

[moimp]

Bonjour à tous,
J'ai un problème pour régler la largeur des étiquettes.
Dans le cas général, je souhaite une largeur minimum mais pas après les boutons radio.
Avec le code suivant, la largeur mini est toujours appliquée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.cardForm label
{
	min-width:9rem;
}

Avec le code suivant, la largeur mini n'est jamais appliquée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.cardForm label:not(input[type='radio']>label)
{
	min-width:9rem;
}

Extrait du code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
		<label for="capital">Capital</label><input type="text" name="capital" id="capital" value="" />
			<input type="radio" name="capital_unit" id="capital_unit1" value="3" /><label for="capital_unit1" class="blue">k€</label>
			<input type="radio" name="capital_unit" id="capital_unit2" value="6" /><label for="capital_unit2" class="blue">M€</label><br/>

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
label {
	display:inline-block;
  min-width:9rem;
}
input[type=radio]+label, input[type=checkbox]+label {
	min-width:auto;
}

[moimp]

Merci, c'est super. Un petit retour sur mon aide mémoire css favori m'a permis de comprendre pourquoi. Précédemment, je n'avais pas compris la différence entre + et >. Maintenant, c'est plus clair.

[Invité]

Bonjour,

pour compléter ton "aide mémoire" :

• a > b : Sélecteur des enfants directs
• a + b : Sélecteur du voisin direct
• a ~ b : Sélecteur des voisins généraux