2012-09-10 9 views
11

esempio qui: http://jsfiddle.net/R7GUZ/3/Come risolvere stile di elenco non mostrare quando si utilizza le colonne CSS3 su Webkit

Sto avendo un diavolo di un tempo ottenere list-style a lavorare in WebKit per un genitore OL in stile con

-webkit-column-count: 2; 
-moz-column-count: 2; 
column-count: 2; 

Come si formatta un elenco ordinato in colonne con css3 e si mantiene ancora lo stile list-style?

  <ol class="text-col2"> 
       <li> 
        <strong>Can we call you?</strong> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p> 
       </li> 

       <li> 
        <strong>Can we call you?</strong> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p> 
       </li> 
      </ol> 

risposta

15

Aggiunta 20px margin-left alle li s ha fatto il trucco

ol li { 
    list-style: decimal; 
    margin-left: 20px 
} 
+0

Grazie, questo problema mi ha fatto impazzire fino a quando non ho capito che si trattava di un problema di elenco in stile elenco-colonna. La tua soluzione funziona, anche se ho rimosso anche il padding-left dall'elemento ol/ul in modo da non avere spaziature aggiuntive non necessarie. –

7

Sembra che i numeri sono in realtà nascosti. Questo può essere risolto utilizzando la seguente proprietà:

OL { 
    list-style-position: inside; 
} 

Nota Se è stato reimpostare le proprietà margin e padding (come nel tuo esempio su jsFiddle dove i CSS sono stati normalizzato), si dovrà impostare loro di i valori corretti in modo che le colonne siano formattate correttamente.

Problemi correlati