Come dispay lista non ordinata in linea con proiettili?

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

  •  09-06-2019
  •  | 
  •  

Domanda

Ho un file html con una lista non ordinata.Voglio mostrare gli elementi di una lista in orizzontale, ma ancora di mantenere i proiettili.Non importa quello che cerco, ogni volta che ho impostato lo stile inline per soddisfare il requisito orizzontale non può ottenere i proiettili per la visualizzazione.

È stato utile?

Soluzione

L'opzione migliore che ho visto in altre risposte è stata di utilizzare float:left;.Purtroppo, non funziona in IE7, che è un requisito qui* — si continua a perdere il proiettile.Io non sono veramente appassionati di utilizzo di un'immagine di sfondo sia.

Quello che sto per fare, invece (che nessun altro ha suggerito, di conseguenza, l'auto-risposta) è andare con aggiunta manuale di • per il mio html, invece di stile.E ' meno ideale, ma è il più compatibile opzione che ho trovato.

modifica: *Corrente i lettori di prendere nota dei post originale data.IE7 è improbabile che sia più una preoccupazione.

Altri suggerimenti

Ho avuto lo stesso problema, ma solo in Internet Explorer (ho testato la versione 7) - non in Firefox 3 Safari 3.Utilizzando il :prima di selettore funziona per me:

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

Sto utilizzando un quadrato di proiettile qui, ma un normale proiettile \2022 avrebbe funzionato lo stesso.

Si potrebbe anche usare una immagine di sfondo sul <li> elementi, con un'imbottitura per evitare che il testo sovrapposto ad esso.

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

Il browser visualizza i proiettili perché la proprietà style "display" è inizialmente impostato su "list-item".Modifica della visualizzazione struttura a "inline" annulla tutti i particolari stili di elenco di elementi.Si dovrebbe essere in grado di simulare con l' :prima di selezione e contenuto della proprietà, ma IE (almeno fino alla versione 7) non li supporta.La simulazione con un immagine di sfondo è probabilmente il miglior cross-browser per farlo.

È in realtà molto semplice correzione.Aggiungere il seguente ul:

display:list-item;

L'aggiunta di questo CSS riga aggiungere i punti della pallottola.

Tenerli display bloccato, dare loro una larghezza galleggiante e di sinistra.

Che li farà sedere a fianco, che è come la linea, e dovrebbe mantenere lo stile di elenco.

Hai provato float: left sul tuo <li/>?Qualcosa di simile a questo:

<!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>

Io ho testato solo Firefox 3.0.1, che vi lavora.Il margin per il resto il proiettile che si sovrappone al precedente articolo.

aggiunta:Essere cauti quando si float gli elementi rimuoverli dal normale flusso, che a sua volta provoca la <ul/> non avere altezza.Se si desidera aggiungere un bordo o qualcosa del genere, si ottengono risultati strani.

Un modo per risolvere che è quello di aggiungere le seguenti stili:

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

Ero solo smanettare e ho incontrato lo stesso problema con lo stesso browser vincoli;quando ho cercato una risposta, il tuo post è venuto senza risposta.Questo è probabilmente troppo tardi per aiutare voi, ma ho pensato che per i posteri amor dovrei postare.

Tutto quello che ho fatto per risolvere il mio problema era quello di incorporare un'altra lista con un solo elemento all'interno di ogni elemento della prima lista;in questo modo...

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 Pagina:

    o a o b o c

...è un muto soluzione, ma sembra funzionare.

Si potrebbe utilizzare il Carattere di enti, vedere il riferimento : http://dev.w3.org/html5/html-author/charref

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

In HTML, ho aggiunto una pausa dopo ogni li come questo:

<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>

E CSS:

li { float:left; }

È possibile utilizzare il seguente codice

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top