Alignement gauche droit dans liste <li>

**roduce** · 19/06/2009, 10h58

Bonjour,

je cherche depuis ce matin à aligner des éléments dans cet ensemble:

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
<ul>
<li id="1" class="li_groupe">
			<span class="li_titre">
				test1<i>(6)
			</span>
			<span class="li_action">
				<a onClick=demander_gr(1)>#<img src="./img/sup.png" />#</a>
			</span>
 
			</li><li id="3" class="li_groupe">
			<span class="li_titre">
				hhuj<i>(1)
			</span>
			<span class="li_action">
				<a onClick=demander_gr(3)>#<img src="./img/sup.png" />#</a>
			</span>
			</li>
</ul>
</div>

le but étant d'avoir li_titre aligné à gauche et li_action aligné à droite.

Pour l'instant mon css fait que certe il y a alignement mais les élements à droites sont décalé d'une hauteur vers le bas.
J'ai trouvé un topic qui suggère de faire margin-top:-15px mais ce n'est pas propre comme codage à mon gout.

Merci de votre aide.

**Msieurduss** · 19/06/2009, 11h49

Ca n'a rien à voir, mais tu as des balises <i> non fermées... ça non plus ce n'est pas très propre comme codage

Sinon, cela se fait parce que les <li> s'affichent comme des blocs. Donc elles prennent leur place sur toute la longueur.
Personnellement, je vois deux choses à tenter :

Code :

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

1
2
 
display: inline;

ou :

Code :

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

1
2
 
position: absolute;

Tu mets les <li> dans une div en position relative et tu les places manuellement (avec les propriétés left et top). Mais c'est moins pratique quand même.

**roduce** · 19/06/2009, 12h26

j'ai testé les trois voir même des mélanges et ça donne rien...
J'ai en revanche eu des positions des puces très bizaroides

edit: après test sans ul et li juste avec une div en base, c'est pareil ça veut pas...

**Bisûnûrs** · 19/06/2009, 13h33

Et un float:left sur li_titre et un float:right sur li_action ?

**roduce** · 20/06/2009, 15h56

c'est la première chose que j'ai tente ... Aussi illogique que ça puisse paraitre ça marche pas...

**Bisûnûrs** · 20/06/2009, 16h11

Dans ce cas là tu l'as peut-être mal implémentée. On peut voir ton morceau de code CSS ? Ou mieux, un exemple en ligne de ce que tu as actuellement ?

**12monkeys** · 20/06/2009, 16h12

Bonjour

Aurais tu une page en ligne qu'on puisse voir. De plus ton code ci dessus n'inclus pas le css...

La proposition de bisûnûrs fonctionne parfaitement...

**roduce** · 20/06/2009, 22h12

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.li_action {
	background-color:#F63;
	float:right;
}
.li_titre {
	float: left;
	background-color:#699;
}
#liste li {
	width: 300px;
	background-color:#930;
}
 
-->
</style>
</head>
 
<body>
<ul id="liste">
  <li><span class="li_titre">gauche 1</span><span class="li_action">droite 1</span></li>
  <li><span class="li_titre">gauche 2 </span><span class="li_action">droite 2</span></li>
  <li><span class="li_titre">gauche 3 </span><span class="li_action">droite 3</span></li>
</ul>
</body>
</html>

par exemple ceci ne marche pas...

**Bisûnûrs** · 20/06/2009, 22h34

Un overflow:hidden sur tes li devrait résoudre ton problème.

**roduce** · 20/06/2009, 22h41

effectivement ça marche !

je passe le post en résolu !

si jamais tu pouvais juste m'expliquer pourquoi il faut un overflow hidden ?

merci

NB: ça a pour effet de faire disparaître les puces de la liste. Est-ce normal ?

**Bisûnûrs** · 20/06/2009, 23h21

L'overflow:hidden créé un nouveau contexte de formatage (une recherche sur le forum ou sur Google pour plus d'infos) qui empêche le dépassement des flottants (pareil).

Mais l'overflow:hidden masque tout ce qui est hors de l'élément qui l'a, et les puces sont par défaut en outside. Essaie de les basculer en inside pour les voir apparaitre.

Alignement gauche droit dans liste <li>

Positionnement en CSS

Discussions similaires

Partager

Partager