aligner 5 balises inline

**dragonno** · 02/03/2009, 22h50

Bonsoir,
comment feriez-vous pour que mes 5 balises <span> soient sur une seule ligne qui remplit la largeur de la page ?

Moi j'ai fait ça, mais ça marche pas, ç'est sur une ligne mais ça va pas jusqu'à la largeur de la page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
.infos
{
height:40px;
width:100%;
}
 
.soustitre
{
font-size:20px;
color:green;
width:100px;
background-color:yellow;
}
 
.valeur
{
font-size:12px;
color:red;
margin:auto;
}
</style>
 
<body>
<div class="infos" id="infos">
 
<span class="soustitre">Vie : 
<span class="valeur" id="vie">100</span>
</span>
<span class="soustitre">Endurance : 
<span class="valeur" id="endurance">100</span>
 </span>
<span class="soustitre">Mental : 
<span class="valeur" id="mental">100</span>
</span>
<span class="soustitre">Faim : 
<span class="valeur" id="faim">100</span>
</span>
<span class="soustitre">Soif : 
<span class="valeur" id="soif">100</span>
</span>
 
</div>
</body>

**Macmillenium** · 02/03/2009, 23h02

Bonsoir,

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.infos
{
height:40px;
}
 
.soustitre
{
font-size:20px;
color:green;
width:100px;
display:-webkit-inline-box;
display:-moz-inline-box;
display:inline-block;
background-color:yellow;
}
 
.valeur
{
font-size:12px;
color:red;
}

Après c'est à toi d'adapter la largeur de tes span par rapport a leur conteneur parent par exemple 20%

**dragonno** · 02/03/2009, 23h04

Merci beaucoup macmillenium !!!
Je vais tester ça^^

Edit :

ça aligne toujours pas sur la largeur de la page, car si je met 20% de largeur pour la classe "soustitre" j'ai la derniere balise qui passe à la ligne, et si je met que 15% ça atteind pas la largeur de la page.

Avec mon premier code, ça faisait la même chose que ce code-là, c'est bizarre qu'on ne puisse pas remplir la largeur de la page automatiquement, il doit y avoir un truc

**dragonno** · 02/03/2009, 23h46

Bon j'ai reussi avec une table, mais je voulais éviter de l'utiliser car il parait que c''est plus conseillé par le w3c ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style>
 
.infos
{
height:40px;
width:100%;
}
 
.soustitre
{
font-size:20px;
color:green;
margin:auto;
}
 
.valeur
{
font-size:12px;
color:red;
margin:auto;
}
 
</style>
 
 
 
<body>
 
<table class="infos" id="infos">
<tr>
<td class="soustitre">
Vie : <span class="valeur" id="vie">100</span>
</td>
<td class="soustitre">
Endurance : <span class="valeur" id="endurance">100</span>
</td>
<td class="soustitre">
Mental : <span class="valeur" id="mental">100</span>
</td>
<td class="soustitre">
Faim : <span class="valeur" id="faim">100</span>
</td>
<td class="soustitre">
Soif : <span class="valeur" id="soif">100</span>
</td>
</tr>
</table>
 
</body>

**desert** · 03/03/2009, 11h17

Envoyé par dragonno

Avec mon premier code, ça faisait la même chose que ce code-là, c'est bizarre qu'on ne puisse pas remplir la largeur de la page automatiquement, il doit y avoir un truc

En fait, le retour à la ligne réagit comme si il y avait un espace après tes balises span. Ce qui fait que : les 20% + les espaces qui suivent, on dépasse les 100%.
Si tu mets toutes tes span sur une ligne, normalement, cela devrait afficher ce que tu souhaites.

Code :

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

<span class="soustitre">Vie : <span class="valeur" id="vie">100</span></span><span class="soustitre">Endurance : <span class="valeur" id="endurance">100</span></span><span class="soustitre">Mental : <span class="valeur" id="mental">100</span></span><span class="soustitre">Faim : <span class="valeur" id="faim">100</span></span><span class="soustitre">Soif : <span class="valeur" id="soif">100</span></span>

Mais bon, c'est pas super lisible... ou bien tu ajoutes la propriété display:block à tes spans.
Concernant la balise table, elle n'est pas déconseillée par le W3C. Elle est juste déconseillée en général lorsque l'on utilise celle-ci pour faire de la mise en page. Si c'est pour afficher des données sous la forme de tableau (exemple), il n'y a pas de raison de s'en passer puisque elle est faite pour.

EDIT: Petite erreur corrigée.

**dragonno** · 04/03/2009, 16h58

Merci beaucoup pour tout^^

C'est résolu, avec les span^^

Je dirais jamais assez que ce site est super^^

aligner 5 balises inline

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager