Afficher liste non ordonnée en ligne, mais garder les balles

Question

J'ai un fichier html avec une liste non-ordonnée. J'en veux pour preuve les éléments de la liste à l'horizontale, mais toujours garder les balles. Peu importe ce que j'essaie, à chaque fois que j'ai mis le style en ligne pour répondre à l'exigence horizontale je ne peux pas obtenir les balles à l'écran.

Answer 1

La meilleure option que j'ai vu dans d'autres réponses a été d'utiliser des float:left;. Malheureusement, il ne fonctionne pas dans IE7 qui est une exigence ici — vous encore en perdre la balle. Je ne suis pas vraiment désireux d'utiliser une image d'arrière-plan soit.

Ce que je vais faire à la place (que personne n'a suggéré, d'où l'auto-réponse) est aller avec l'ajout manuel d' • de la mon html, plutôt que le style de cette. C'est pas l'idéal, mais c'est le plus compatible avec l'option que j'ai trouvé.

Answer 2

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. À l'aide de l' :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;
}

Je suis à l'aide d'un carré de balle ici, mais une normale bullet \2022 serait la même.

Answer 3

Vous pouvez également utiliser une image d'arrière-plan sur le <li> les éléments, avec un rembourrage pour garder le texte de recoupement.

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

Answer 4

Garder l'affichage bloqué, de leur donner une largeur et flotter à gauche.

Qui fera d'eux de s'asseoir à côté des autres, qui est comme à la volée, et devrait maintenir le style de liste.

Answer 5

C'est en fait très simple à corriger. Ajouter les éléments suivants à l'ul:

display:list-item;

L'ajout de cette CSS ligne va ajouter des points de balle.