Discussion :

[PoZZyX]

Bonjour,
j'ai créé une liste à puces (<ul><li>El1</li><li>El2</li></ul>) et je l'ai mise en display:inline.

Du coup, j'obtiens : El1 El2 et il n'y plus les puces
Est-ce possible de fixer des puces en mode inline ? ou par exemple un - ou | de séparation entre les elements de la liste ?


Merci d'avance

[10-nice]

http://www.developpez.net/forums/viewtopic.php?t=400294

[PoZZyX]

lui il utilise des lien en block non ? moi j'aimerais simplement un caractère de séparation entre chaque <li>. j'ai essayé :
ul
{
list-style-type:square;
}

marche pas non plus

[10-nice]

tu peux montrer ton code stp ?

[PoZZyX]

html :

Code :

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

1
2
3
4
5
6
7
8
9
<div id="div_menu">
	<ul>
		<li>Profil</li>
		<li>Messages privés</li>
		<li>Accueil du forum / site</li>
		<li>Liste des membres</li>
		<li>A propos</li>
	</ul>
</div>

CSS:

Code :

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

1
2
3
4
5
6
#div_menu li
{
	display:inline;
	list-style-type:square;
 
}

[spirou]

Salut,

Je ne vois pas trop l'utilité d'utiliser une liste à puce horizontale en display inline, les <span> seraient plus appropriés à mon goût, mais bon peut-être que tu as une idée bien précise de ce que tu veux faire.

J'ai deux solutions soit tu intègres une puce en image, du genre :

Code :

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

1
2
3
4
5
6
7
 
#div_menu li{
display: inline;
margin: 0 10px 0 0;
padding-left: 15px; /* largeur de ton image */
background: #fff url(tonImage.gif) no-repeat;
}

Ou alors si une image ne te convient pas, les caractères spéciaux pourraient faire l'affaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="div_menu">
 <ul>
    <li>&bull;&nbsp;Profil</li>
    <li>&raquo;&nbsp;Messages privés</li>
    <li>&curren;&nbsp;Accueil du forum / site</li>
    <li>&ndash;&nbsp;Liste des membres</li>
    <li>&rsaquo;&nbsp;A propos</li>
 </ul>
</div>

A part ça, je ne vois rien d'autre.

[PoZZyX]

ok merci ça marche bien avec la première méthode

thx