Alignement caractères à droite

**skywaukers** · 18/04/2013, 15h23

Bonjour,

j'ai une liste de ce style :

Code :

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

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

**k4st0r42** · 18/04/2013, 15h27

T'as qu'a mettre une certaine longueur à tes <li> et un background contenant une image alignée à droite en forme de >

**skywaukers** · 18/04/2013, 15h33

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

**rodolphebrd** · 18/04/2013, 16h35

bonjour,

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

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
 
<!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)

**skywaukers** · 18/04/2013, 17h17

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

**NoSmoking** · 18/04/2013, 18h57

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 :

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
<!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>

Alignement caractères à droite

HTML

Vue hybride

Discussions similaires

Partager

Partager