Afficher la liste non ordonnée en ligne, mais conservez les puces

La meilleure option que j’ai vue dans d’autres réponses était d’utiliser float:left; . Malheureusement, cela ne fonctionne pas dans IE7 qui est une exigence ici ^* – vous perdez toujours la balle. Je n’ai pas vraiment envie d’utiliser une image de fond non plus.

Ce que je vais faire à la place (que personne d’autre n’a suggéré, donc l’auto-réponse), c’est d’append manuellement • au my HTML, plutôt que de styliser cela. C’est loin d’être idéal, mais c’est l’option la plus compatible que j’ai trouvée.

edit : ^* Les lecteurs actuels prennent note de la date de publication initiale. IE7 ne devrait plus être un problème.

J’ai eu le même problème, mais seulement dans Internet Explorer (j’ai testé la version 7) – pas dans Firefox 3 ou Safari 3. En utilisant le : avant le sélecteur fonctionne pour moi:

 ul.tabs li { list-style: none; float: left; } ul.tabs li:before { content: '\ffed'; margin-right: 0.5em; } 

J’utilise une balle carrée ici, mais une balle normale 2022 fonctionnerait de la même façon.

Vous pouvez également utiliser une image d’arrière-plan sur les éléments

 li { background-image: url(i/bullet.gif) no-repeat center left; padding-left: 20px; display: inline; } 

C’est en fait une solution très simple. Ajoutez ce qui suit au ul:

 display:list-item; 

L’ajout de cette ligne CSS appenda les puces.

Le navigateur affiche les puces car la propriété de style “display” est initialement définie sur “list-item”. Changer la propriété d’affichage pour “inline” annule tous les styles spéciaux obtenus par les éléments de la liste. Vous devriez pouvoir le simuler avec le sélecteur: before et la propriété content, mais IE (au moins via la version 7) ne les prend pas en charge. Le simuler avec une image d’arrière-plan est probablement la meilleure façon de le faire entre les navigateurs.

Gardez les afficheurs bloqués, donnez-leur une largeur et laissez-les flotter.

Cela les fera asseoir à côté, ce qui est comme en ligne, et devrait conserver le style de liste.

Avez-vous essayé float: left sur votre

? Quelque chose comme ça:

       
 
test
 
test2
 
   

J’ai seulement testé Firefox 3.0.1, ça marche là-bas. La margin est définie car sinon votre puce chevauche l’élément précédent.

addition: Méfiez-vous que lorsque vous flottez les objects, vous les retirez du stream normal, ce qui entraîne à son tour que le

n’a pas de hauteur. Si vous voulez append une bordure ou quelque chose, vous obtiendrez des résultats étranges.

Une solution consiste à append les éléments suivants à vos styles:

 ul { overflow: auto; background: #f0f; } 

Je ne faisais que déconner et j’ai rencontré le même problème avec les mêmes contraintes de navigateur. Lorsque j’ai cherché une réponse, votre message est arrivé sans réponse. C’est probablement trop tard pour vous aider, mais je pensais que pour la postérité, je devrais le poster.

Tout ce que j’ai fait pour résoudre mon problème était d’intégrer une autre liste avec un élément dans chaque élément de liste de la première liste; ainsi…

HTML:

 
 
 
a
 
b
 
c
 
  

CSS:

 .block-list > ul > li { display: inline; float: left; } 

IE7 Page:

  oaoboc 

… c’est une solution stupide, mais cela semble fonctionner.

Vous pouvez utiliser des entités Caractère, voir référence: http://dev.w3.org/html5/html-author/charref

 

		      	
  En HTML, j’ai ajouté une pause après chaque li comme ceci: 
 
Water is Sacred

 
Water is Sacred

 
Water is Sacred

 
Water is Sacred

 
Water is Sacred

 
Water is Sacred

 
  Et CSS: 
 li { float:left; }