Uso &middot; invece di proiettile per <ul>

Ho trovato un articolo sul list-style-type proprietà nel CSS, ma non elenco &middot; (·) come opzione, in contrasto con il difetto disc o &bullet; (•). C’è un modo per fare questo con l’HTML o il CSS?

  • obbligatorio w3fools riferimento
  • non significa che non siano utili per i riferimenti
  • ho usato come w3schools una volta, ma poi ho scoperto che la lettura delle specifiche realtà era molto facile e che w3schools è sbagliato, troppo spesso, per me è la fiducia. Se non riesco a credere come una fonte, cessa di essere utile in alcun modo significativo.
  • Ma perché usare i pazzi quando il vero W3 riferimenti così molto meglio?
  • Capisco tutto, ma con qualsiasi cosa su internet, sento il bisogno di testare me stesso in ogni caso, io sono diffidente dall’inizio. E dal momento che hanno un grande insieme di riferimenti, non mi importa di avviamento.
  • la specifica è il documento che definisce come la lingua di lavoro. Per particolari implementazioni browser è possibile utilizzare quirksmode compatibilità di tabelle come un riferimento preciso.
  • Inoltre, è possibile divieto di siti dai risultati di ricerca, come ho fatto io, w3schools. Ho trovato la qualità dei miei risultati ha drasticamente migliorato e non riesco a trovare informazioni precise molto più veloce.
  • Per tutti i piagnoni contro w3fools – novizi di non leggere le specifiche, perché sono scoraggianti e troppo ampia per la maggior parte delle esigenze quotidiane. Invece, il punto a user-friendly docs come LETTURA o MSDN, o anche… stavo andando a raccomandare Apple Dev Club, ma bastone per i primi due. Anche QuirksMode.
  • Io odio w3schools, ma io odio w3fools ancora di più. Perché non fornire un articolo specifico (forse su MDN) che fa un lavoro migliore, piuttosto che punta a quell’inutile pagina web più e più volte?
  • Sull’argomento: interpunkt (aka ”middot”) è tipografico usato per separare le parole. Io non ho sentito parlare qualsiasi lingua dove il interpunct è effettivamente utilizzato in elenchi o simili. Che spiega perché non è un’opzione standard.

InformationsquelleAutor steveo225 | 2011-11-18



6 Replies
  1. 60

    CSS (funziona in qualsiasi browser che supporti :before e content: ):

    li:before { 
        content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
    }
    li {
        list-style:none;
        text-indent:-.5em; /* helps make it look more like it's a bullet. */
    }

    Attenzione: non è un vero e proprio stile di elenco. Pertanto, quando si hanno avvolto liste, sarà divertente. Questo può forse essere mitigato da una negativa text-indent di poche unità per ottenere un funzionamento più simile a un elenco di stile.


    Un’altra implementazione:

    li:before {
        content: '\b7\a0';
        position:absolute;
        right:100%
    }
    li {
        list-style:none;
        position:relative;
    }

    Questa versione sembra funzionare meglio. Io uso spesso :before e :after per aggiungere cose in più, come i confini, ma se si sta aggiungendo un proiettile immagino che non è questo il caso. Anche se questa è l’ipotesi alternativa, è probabilmente da preferire.

  2. 3

    Sì! È possibile utilizzare il before pseudo-classe di inserire il carattere prima di ogni elemento.

    .DotList li:before
    {
        content: "·";
    }

    Qui è un esempio jsFiddle.

  3. 2

    list-style-type non scegliere quale personaggio usare, seleziona un abstract indicatore da utilizzare. Nota, la norma stabilisce:

    Il valore “none” specifica nessun marcatore, altrimenti ci sono tre tipi di marcatore: glifi, sistemi di numerazione, e un sistema alfabetico.

    Glifi sono specificati con disco, cerchio e quadrato. La loro esatta di rendering dipende l’agente utente.

    Per un maggiore controllo sull’indicatore, è necessario impostare un’immagine utilizzando list-style-image o utilizzare il :prima di pseudo elemento e contenuto la struttura, l’impostazione del list-style-type a ‘nessuno’. :before e il contenuto proprietà non sono supportati da IE 7 e versioni precedenti, quindi è necessario utilizzare list-style-image a supporto di IE 7 o semplicemente lasciare che IE 7 utilizzare un altro indicatore. È possibile utilizzare i commenti condizionali per destinazione IE 7 e precedenti.

  4. 1

    Ci sono un numero limitato di opzioni disponibili per list-style-type che sono definite in CSS2 spec.

    È possibile utilizzare:

    • disco
    • cerchio
    • piazza
    • decimale
    • decimale-leading-zero
    • basso-romano
    • superiore-romano
    • inferiore-greco
    • inferiore-latina
    • superiore-latina
    • armeno
    • georgiano
    • basso-alfa
    • superiore-alfa
    • nessuno

    Se vuoi qualcosa di personalizzato, utilizzare list-style-image proprietà

    Se sei di styling per i browser che supportano il contenuto generato, è possibile utilizzare:

    li:before {
      content: '\[utf-8 hex code for character]';
      position: absolute;
      right: 100%;
    }
    
    li {
      position: relative;
    }
    • Nota che questo porterà ad un comportamento strano se il testo dell’elenco è spinto dalla sua posizione flottante elemento. I proiettili non saranno spostati, anche se il testo, e il risultato sarà probabilmente indesiderati.
  5. 0

    Invece di li:before, che colpisce tutti li (nel menu, schede, fisarmonica) sulla pagina, ho usato questo:

    CSS:

    ul {
    	list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC');
    }

    HTML:

      
    <ul>
      <li>This is my middot</li>
    </ul>

Lascia un commento