CSS: controlla lo spazio tra bullet e <li>

Vorrei controllare la quantità di spazio orizzontale che un proiettile spinge <li>verso destra in un <ol>o <ul>.

Cioè, invece di avere sempre

*  Some list text goes
   here.

Mi piacerebbe essere in grado di cambiarlo

*         Some list text goes
          here.

o

*Some list text goes
 here.

Mi sono guardato intorno ma ho trovato solo le istruzioni per spostare l'intero blocco a sinistra oa destra, ad esempio http://www.alistapart.com/articles/taminglists/

Inserisci il suo contenuto in una spanposizione relativamente posizionata, quindi puoi controllare lo spazio con la leftproprietà di span.

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

Per riassumere le altre risposte qui - se si desidera un controllo più preciso sullo spazio tra i punti <li>elenco e il testo in un elemento dell'elenco, le opzioni sono:

(1) Usa un'immagine di sfondo:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

vantaggi:

• Puoi usare qualsiasi immagine tu voglia per il proiettile
• Puoi usare CSS background-positionper posizionare l'immagine praticamente ovunque tu voglia in relazione al testo, usando pixel, ems o%

svantaggi:

• Aggiunge un file di immagine extra (anche se piccolo) alla tua pagina, aumentando il peso della pagina
• Se un utente aumenta la dimensione del testo sul proprio browser, il punto elenco rimarrà nella dimensione originale. Probabilmente andrà ulteriormente fuori posizione all'aumentare della dimensione del testo
• Se stai sviluppando un layout "reattivo" utilizzando solo le percentuali per le larghezze, potrebbe essere difficile ottenere il proiettile esattamente dove lo desideri su una gamma di larghezze dello schermo

2. Utilizzare imbottitura sul <li>tag

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

vantaggi:

• Nessuna immagine = 1 file in meno da scaricare
• Regolando l'imbottitura sul <li>, puoi aggiungere tutto lo spazio orizzontale extra tra il punto elenco e il testo che desideri
• Se l'utente aumenta la dimensione del testo, la spaziatura e la dimensione del punto elenco devono ridimensionare proporzionalmente

svantaggi:

• Impossibile spostare il punto più vicino al testo rispetto al valore predefinito del browser
• Limitato a forme e dimensioni dei tipi di proiettile incorporati nel CSS
• Il punto elenco deve essere dello stesso colore del testo
• Nessun controllo sul posizionamento verticale del proiettile

(3) Avvolgere il testo in un <span>elemento aggiuntivo

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

vantaggi:

• Nessuna immagine = 1 file in meno da scaricare
• Ottieni un maggiore controllo sulla posizione del proiettile rispetto all'opzione (2): puoi spostarlo più vicino al testo (anche se nonostante i miei migliori sforzi sembra che non puoi modificare la posizione verticale aggiungendo padding-topa <span>. Qualcun altro potrebbe avere una soluzione alternativa per questo, però ...)
• Il punto elenco può essere di colore diverso dal testo
• Se l'utente aumenta la dimensione del testo, il proiettile deve ridimensionarsi proporzionalmente (a condizione che tu imposti il ​​riempimento e il margine in ems non px)

svantaggi:

• Richiede un ulteriore elemento non misterioso (questo probabilmente ti farà perdere più amici su SO di quanto non lo sarà nella vita reale;) ma è fastidioso per coloro a cui piace che il loro codice sia il più snello ed efficiente possibile e viola la separazione di presentazione e contenuto che HTML / CSS dovrebbe offrire)
• Nessun controllo su dimensioni e forma del proiettile

Speriamo in alcune nuove funzionalità in stile elenco in CSS4, in modo da poter creare proiettili più intelligenti senza ricorrere a immagini o markup exta :)

Questo dovrebbe farlo. Assicurati di impostare i tuoi proiettili verso l'esterno. puoi anche usare gli pseudo elementi CSS se li puoi trascinare in IE7 verso il basso. Non raccomando di usare pseudo elementi per questo genere di cose, ma funziona per controllare la distanza.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

Vecchia domanda, ma lo pseudo elemento: before funziona bene qui.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

Funziona davvero bene e non richiede molte regole extra o HTML.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

Saluti!

Per tipo di elenco: inline :

È quasi uguale alla risposta di DSMann8 ma meno codice css.

Devi solo farlo

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

Saluti

Puoi usare l' padding-leftattributo sulle voci della lista ( non sulla lista stessa!).

Usare il rientro del testo su li funziona meglio.

rientro testo: -x px; avvicinerà il proiettile a li e viceversa.

Usando relativo su span la sinistra negativa potrebbe non funzionare correttamente con le versioni precedenti per IE. PS: evitare di dare posizioni il più possibile.

Ecco un'altra soluzione che utilizza il contatore CSS e gli pseudo elementi. Lo trovo più elegante in quanto non richiede l'uso di markup html extra né di classi css:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

Uso spazi non separabili in modo che la spaziatura influisca solo sulla prima riga degli elementi della mia lista (se l'elemento della lista è lungo più di una riga). È possibile utilizzare qui l'imbottitura.

Vecchia domanda ma ancora rilevante. Consiglio di usare il negativo text-indent. list-style-positiondeve essere outside.

Professionisti:

• La pallottola viene posizionata correttamente automaticamente
• La modifica della dimensione del carattere non interrompe la posizione del punto elenco
• Nessun elemento aggiuntivo (nessun :: pseudo-elementi anche)
• Funziona con RTL e LTR senza modifiche ai CSS.

Contro:

• provare
• per
• trova
• uno :)

Un elenco non ordinato inizia con il tag ul. Ogni voce dell'elenco inizia con Le voci dell'elenco saranno contrassegnate con punti elenco (piccoli cerchi neri) per impostazione predefinita:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Produzione:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

La proprietà indentazione del testo specifica il rientro della prima riga in un blocco di testo.
Nota: sono ammessi valori negativi. La prima riga sarà rientrata a sinistra se il valore è negativo.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Sembra che tu possa (un po ') controllare la spaziatura usando il padding sul tag <li>.

<style type="text/css">
    li { padding-left: 10px; }
</style>

Il problema è che non sembra permetterti di scricchiolarlo come nel tuo esempio finale.

Per questo potresti provare a disattivare il tipo di elenco e usare & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

Sembra esserci una soluzione molto più pulita se vuoi solo ridurre la spaziatura tra il punto elenco e il testo:

li:before {
    content: "";
    margin-left: -0.5rem;
}

Puoi anche utilizzare una sostituzione dell'immagine di sfondo come alternativa, offrendoti il ​​controllo totale sul posizionamento verticale e orizzontale.

Vedi la risposta a questa domanda

ul
{
list-style-position:inside;
} 

Definizione e utilizzo

La proprietà position-style-position specifica se gli indicatori degli elementi dell'elenco devono apparire all'interno o all'esterno del flusso di contenuti.

Fonte: http://www.w3schools.com/cssref/pr_list-style-position.asp

È possibile utilizzare ul li:beforee un'immagine di sfondo, e assegnare position: relativee position:absoluteal lie li:before, rispettivamente. In questo modo è possibile creare un'immagine e posizionarla dove si desidera rispetto a li.

Utilizzare padding-left:1em; text-indent:-1emper il <li>tag.
Quindi, list-style-position: insideper il <ul>tag.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

La seguente soluzione funziona bene quando si desidera avvicinare il testo al punto elenco e anche se si dispone di più righe di testo.

margin-right ti permette di avvicinare il testo al punto elenco

text-indent assicura che più righe di testo siano allineate correttamente

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

utilizzare <span style="display: flex;">all'interno di ciascuno <li>.