1 pièce(s) jointe(s)
Création d'une liste avec un élément flèche
Bonjour @tous.
Désolé pour le titre du sujet qui n'est peut-être pas très évocateur.
Dans l'idée, je souhaiterais faire une liste de choix pour l'utilisateur (<li>) et à droite de chacun de ces choix, je souhaiterais qu'il y ait une flèche, centré en hauteur et qui partirait vers la droite.
Pour cela, j'ai réalisé le code suivant dans ma partie HTML (oui j'ai lu sur un ofrum que pour avoir la flèche après il fallait la déclarer avant...) :
Code:
1
2
3
4
5
6
| <div id="theme">
<ul class="localisation" id="loc">
<li id="1"><span class = "fleche_avant">▶</span>1 - Carrefour</li>
<li id="2"><span class = "fleche_avant">▶</span>2 - Mairie</li>
</ul>
</div> |
Et dans mon CSS :
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
| .localisation {
margin: 1px 0;
padding: 0px 10px;
font: 12px arial, sans-serif;
background: #F2F2F2;
}
.localisation li {
margin: 1px 0;
padding: 10px 0px;
list-style-type:none;
border-color: purple;
border-style: solid;
border-width: 1px;
}
.fleche_avant{
float: right;
text-align: right;
color: #666;
font: 12px arial, sans-serif;
vertical-align: middle;
height:100%;
position:relative;
}
#theme {
position: absolute;
width: 300 px;
margin: 10px 0 0 10px;
background: #fff none repeat scroll 0 0;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
} |
Le problème c'est que, si je met une bordure, ma flèche, ne prend pas toutes la hauteur du div dans lequel elle est contenu (à savoir "theme") et du coup, elle ne se centre pas complétement en hauteur, surtout si le contenu de mon li est sur deux lignes comme l'indique l'image suivante :
Pièce jointe 181766
Avez-vous une idée de la solution à apporter ?
Geo-x
