Comment faire pour afficher la liste non ordonnée en ligne avec des balles?

StackOverflow https://stackoverflow.com/questions/34399

  •  09-06-2019
  •  | 
  •  

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.

Était-ce utile?

La solution

La meilleure option que j'ai vu dans d'autres réponses a utiliser float:left;.Malheureusement, il ne fonctionne pas dans IE7 qui est une exigence ici* — vous avez encore de 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' • 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é.

modifier: *Les lecteurs actuels prendre note du message d'origine date.IE7 est peu probable d'être une préoccupation plus.

Autres conseils

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 la :avant 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.

Vous pouvez également utiliser une image d'arrière-plan sur l' <li> é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;
}

Le navigateur affiche les balles parce que le style de la propriété "display" est initialement réglé sur "list-item".Modification de l'affichage à la propriété "inline" annule tous les styles spéciaux que les éléments de la liste de l'obtenir.Vous devriez être capable de simuler avec :avant de sélecteur et le contenu de la propriété, mais IE (au moins jusqu'à la version 7) ne les supporte pas.La simulation avec une image de fond est probablement la meilleure manière de croix-navigateur pour le faire.

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.

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.

Avez-vous essayé float: left sur votre <li/>?Quelque chose comme ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        ul li {
            float: left;
            margin-left: 2em;
        }
    </style>
</head>
<body>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</body>
</html>

J'ai testé uniquement Firefox 3.0.1, il y travaille.L' margin est ensemble car sinon votre balle chevauche l'élément précédent.

plus:Méfiez-vous que lorsque vous flotter les éléments que vous les retirer de la circulation normale, ce qui provoque la <ul/> ne pas avoir de hauteur.Si vous souhaitez ajouter une bordure ou quelque chose, vous obtiendrez des résultats bizarres.

Un moyen de corriger ça est d'ajouter les éléments suivants à votre styles:

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

Je viens de déconner et j'ai rencontré le même problème avec le même navigateur contraintes;quand j'ai cherché une réponse à votre post est venu sans réponse.C'est probablement trop tard pour vous aider, mais j'ai pensé dans un souci de postérité, je devrais le poster.

Tout ce que je fait pour résoudre mon problème était d'intégrer une autre liste avec un seul élément à l'intérieur de chaque élément de la liste de la première liste;comme si...

HTML:

<div class="block-list">
  <ul>
    <li><ul><li>a</li></ul></li>
    <li><ul><li>b</li></ul></li>
    <li><ul><li>c</li></ul></li>
  </ul>
</div>

CSS:

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

IE7 Page:

    o a o b o c

...c'est un muet solution, mais il semble fonctionner.

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

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>

En HTML, j'ai ajouté une pause après chaque li comme ceci:

<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>

Et CSS:

li { float:left; }

Vous pouvez utiliser le code suivant

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top