Alignement caractères à droite

Version imprimable

18/04/2013, 15h23
skywaukers

Alignement caractères à droite
Bonjour,

j'ai une liste de ce style :
Code:

1 2 3 4 5 6 7 8 9 10 <ul> <li>ligne 1</li> <li>ligne 2 plus longue</li> <li>ligne 3 <ul> <li>sous ligne1</li> <li>sous ligne2</li> <ul> </li> </ul>
en fait je voudrais mettre un petit ">" à la fin de chaque ligne, mais que tous les caractères d'un même niveau soient alignés à droite par rapport au libellé le plus long (ligne2... par exemple ici)

Merci pour votre attention.

@++
Dany
18/04/2013, 15h27
k4st0r42

T'as qu'a mettre une certaine longueur à tes <li> et un background contenant une image alignée à droite en forme de >
18/04/2013, 15h33
skywaukers

bonjour,

merci pour la réponse rapide. en fait ma difficulté est de définir la taille du <li> en fonction de la plus grande ligne, les intitulés pouvant changer.

@++
Dany

bonjour,

il faut utiliser un pseudo élément pour obtenir cela:

Code:

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
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first_level>li {
        display:block;
        width:150px;
        position:relative;
}
.first_level>li:after {
        content:">";
        position:absolute;
        top:0;
        right:0;
}
 </style>
 </head>
 <body>
<ul class="first_level">
<li>ligne 1</li>
<li>ligne 2 plus longue</li>
<li>ligne 3
  <ul>
    <li>sous ligne1</li>
    <li>sous ligne2</li>
  </ul>
</li>
</ul>
</body>
</html>

Attention de bien fermer vos balises (UL)

18/04/2013, 17h17
skywaukers

Bonjour,

et Merci.

oui j'ai écris le code directement dans le post, j'ai pas fait gaffe, mais dans la vraie vie les balises sont biens fermées :)

Cela répond presque parfaitement à ma demande, à l'exception cependant du width qui est fixe. En fait l'idéal (mais je ne sais pas si cela est bien possible) c'est que le li s'ajuste automatiquement et que le > s'aligne bien à droite comme c'est le cas dans votre exemple.

encore merci.

@++
Dany

Bonjour,
si tu veux que ton élément UL s'adapte à la plus grande largeur, passe le en float:left, par exemple, il n'occupera que la place du contenu.

Il te faut également ajouter un padding-right pour que le "after" ne se superpose pas avec le texte le plus long.

Sur base de l'exemple de rodolphebrd

Code:

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first_level{
  float:left;           /* s'adapte au contenu */
  background:#EEE;      /* pour voir la zone occupée */
}
.first_level>li {
  display:block;
  position:relative;
  padding-right:1.5em;  /* laisse la place pour le "after" */
}
.first_level>li:after {
  content:">";
  position:absolute;
  top:0;
  right:0;
}
</style>
</head>
<body>
<ul class="first_level">
  <li>ligne 1</li>
  <li>ligne 2 plus longue</li>
  <li>ligne 3
    <ul>
      <li>sous ligne1</li>
      <li>sous ligne2</li>
    </ul>
  </li>
</ul>
</body>
</html>

18/04/2013, 19h08
rodolphebrd

Je viens de prendre le train en retard...

Bien vu @NoSmoking :ccool:

J'ajouterais qu'il faut bien mettre un clear:left, au moins, pour les éléments à placer après cette liste, afin de les replacer dans le flux.
18/04/2013, 19h10
NoSmoking

Citation:

Envoyé par rodolphebrd

J'ajouterais qu'il faut bien mettre un clear:left, au moins, pour les éléments à placer après cette liste, afin de les replacer dans le flux.

c'est un détail effectivement qui a son importance :ccool:
23/04/2013, 18h00
skywaukers

Bonsoir,

Un grand merci à vous !!

@++
Dany