28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centraçage horizontal d'une liste avec des puces

bonjour,

je souhaite centrer horizontalement une liste avec des puces.
j'ai bien réussi à faire un liste horizontale avec des puces, mais impossible de trouver comment la center.

pouvez-vous m'aider ?
merci d'avance


<div class="tags">
	<ul class="hor-list">
		<li><a href="lien 1">tag 2</a></li>
		<li><a href="lien 2">tag 3</a></li>
	</ul>
</div>





.tags{
	text-align: center;
}
.tags ul{
	color: #668b9c;
	list-style-type: square;
	padding: 0 0 0 30px;

}
.tags ul li{
	margin: 0 10px 0 20px;
	float:left;
}
.tags ul a{
	color: #000;
	text-decoration: none;
	border-bottom: 1px dashed #968e77;
}
.tags ul a:hover{
	background-color: #294a59;
	color: #fff;
	border: 0px;
}

Modifié par vincent3569 (03 Dec 2010 - 09:46)
Salut,

Tu pourrais mettre le text-align center sur le ul, et les li qui sont dedans en display inline (ce qui suppose de jeter le float actuel).
Modifié par Marvin Le Rouge (02 Dec 2010 - 09:05)
Marvin Le Rouge a écrit :
Salut,

Tu pourrais mettre le text-align center sur le ul, et les li qui sont dedans en display inline (ce qui suppose de jeter le float actuel).



bonjour et merci de ta réponse

c'est ce que j'avais au départ, mais en passant du float au inline, je perds le list-style-type: square alors que voudrais le conserver.

avez-vous une autre piste à me conseiller ?
Modifié par vincent3569 (02 Dec 2010 - 15:23)
Modérateur
Bonjour,

Pour conserver les puces, mets un list-style-type:none sur ta liste, et utilises plutôt un background-image (avec une image de puce) sur tes li.
Modifié par Tony Monast (02 Dec 2010 - 16:04)
Les puces s'affichent sur des éléments en display:list-item uniquement. Si tu passes tes LI en display:inline ou display:inline-block (a priori la bonne solution pour pouvoir les centrer), plus de puces.

Deux solutions me viennent en tête:
ul {
  display: table;
  margin: 0 auto;
  padding: 0;
  list-style: square inside;
}
ul > li {
  float: left;
}

(Un élément en display:table prendra par défaut la largeur de son contenu, et peut être centré avec les marges automatiques sans qu'on ait besoin de lui donner une largeur explicite.)

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul > li {
  display: inline;
}
ul > li + li {
  padding-left: 20px;
  background: url(puce.png) no-repeat left center;
}
(La puce est dessinée avec une image de fond. On ne la dessine pas sur le premier LI de la liste.)

Allez, pour la route:
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul > li {
  display: inline;
}
ul > li + li:before {
  content: "{LoL} ";
}

Modifié par Florent V. (02 Dec 2010 - 19:13)
Florent V. a écrit :
Les puces s'affichent sur des éléments en display:list-item uniquement. Si tu passes tes LI en display:inline ou display:inline-block (a priori la bonne solution pour pouvoir les centrer), plus de puces.

Deux solutions me viennent en tête:
ul {
  display: table;
  margin: 0 auto;
  padding: 0;
  list-style: square inside;
}
ul &gt; li {
  float: left;
}

(Un élément en display:table prendra par défaut la largeur de son contenu, et peut être centré avec les marges automatiques sans qu'on ait besoin de lui donner une largeur explicite.)


cette solution répond tout à fait à mes attentes !
merci de ton aide
tu peux voir le résultat ici :
http://vincent.bourganel.free.fr/zenphotoNB2/index.php?p=news&title=actualite-6
Sujet clos
Aller à