Existe-t-il un moyen d'aligner les curseurs HTML5 qui sont bien alignés avec les étiquettes? S'ils ont des étiquettes de tailles différentes, cela a l'air horrible.

J'ai même essayé de définir la largeur de l'étiquette en CSS et cela ne semble pas fonctionner.

<html>
<head><style type='text/css'>
  body { font-family: sans-serif; }
  form label { width: 200px; }
</style></head>
<body>
<form>
		<p><label for="name1">John</label><input id="name1" type="range" min="0" max="1.0" step="0.01" /></p>
		<p><label for="name2">Jacob</label><input id="name2" type="range" min="0" max="1.0" step="0.01" /></p>
		<p><label for="name3">Jingleheimer</label><input id="name3" type="range" min="0" max="1.0" step="0.01" /></p>
		<p><label for="name4">Schmidt</label><input id="name4" type="range" min="0" max="1.0" step="0.01" /></p>
</form>
</body>
</html>
0
Jason S 4 avril 2017 à 21:14

2 réponses

Meilleure réponse

<label> affiche inline par défaut, ce qui signifie que votre width ne sera pas appliqué. Essayez display: inline-block:

form label {
  display: inline-block; /* this is important */
  width: 200px;
}
<form>
  <p><label for="name1">John</label><input id="name1" type="range" min="0" max="1.0" step="0.01" /></p>
  <p><label for="name2">Jacob</label><input id="name2" type="range" min="0" max="1.0" step="0.01" /></p>
  <p><label for="name3">Jingleheimer</label><input id="name3" type="range" min="0" max="1.0" step="0.01" /></p>
  <p><label for="name4">Schmidt</label><input id="name4" type="range" min="0" max="1.0" step="0.01" /></p>
</form>

Vous pourriez aussi devenir fou et sauter dans le train Grid Layout... mais c'est nouveau et certains navigateurs ne le prennent pas en charge.

.sliders {
  display: grid;
}

.sliders label {
  grid-column: 1;
}

.sliders input {
  grid-column: 2;
}
<div class="sliders">
  <label for="name1">John</label><input id="name1" type="range" min="0" max="1.0" step="0.01" />
  <label for="name2">Jacob</label><input id="name2" type="range" min="0" max="1.0" step="0.01" />
  <label for="name3">Jingleheimer</label><input id="name3" type="range" min="0" max="1.0" step="0.01" />
  <label for="name4">Schmidt</label><input id="name4" type="range" min="0" max="1.0" step="0.01" />
</div>
2
canon 4 avril 2017 à 22:18

Le plus simple est de définir une largeur fixe sur votre étiquette.

label {
    width: 100px;
    display: inline-block;
}
<html>
<head><style type='text/css'>
  body { font-family: sans-serif; }
</style></head>
<body>
<form>
		<p><label for="name1">John</label><input id="name1" type="range" min="0" max="1.0" step="0.01" /></p>
		<p><label for="name2">Jacob</label><input id="name2" type="range" min="0" max="1.0" step="0.01" /></p>
		<p><label for="name3">Jingleheimer</label><input id="name3" type="range" min="0" max="1.0" step="0.01" /></p>
		<p><label for="name4">Schmidt</label><input id="name4" type="range" min="0" max="1.0" step="0.01" /></p>
</form>
</body>
</html>
1
Jordan Soltman 4 avril 2017 à 18:19