2012-09-10 17 views
11

ejemplo aquí: http://jsfiddle.net/R7GUZ/3/Cómo fijar estilo de lista no se muestra al utilizar columnas de CSS3 en Webkit

estoy teniendo un infierno de tiempo para conseguir list-style para trabajar en webkit para un estilo OL padres con

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

¿Cómo formateo una lista ordenada en columnas con css3 y sigo manteniendo el estilo 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> 

Respuesta

15

Adición de 20 píxeles margin-left a los li s hizo el truco

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

Gracias, este problema me estaba volviendo loco hasta que supuse que se trataba de un problema de la columna v list-style-image. Tu solución funciona, aunque también eliminé el relleno-izquierda del elemento ol/ul para no tener espacio adicional innecesario. –

7

Parece que los números son en realidad oculta. Esto se puede resolver mediante el uso de la siguiente propiedad:

OL { 
    list-style-position: inside; 
} 

Nota Si tiene restablecer los margin y padding propiedades (como en el ejemplo de jsFiddle donde CSS han sido normalizado), tendrá que ponerlos a los valores correctos para que las columnas tengan el formato correcto.

Cuestiones relacionadas