¿cómo puedo mostrar los números en una lista ordenada en línea?

Tengo una lista ..¿cómo puedo mostrar los números en una lista ordenada en línea?

<ol> 
    <li>Login</li> 
    <li>Address</li> 
    <li>Shipping</li> 
</ol>

Muestra los números decimales bien, pero cuando me puse la <li> de línea o en línea-bloque, los números se desvanecen! Vi otros lugares en línea mencionar que tengo que asegurarme de tener suficiente margen y relleno ... y estoy seguro de que lo hago (¡10 px de cada uno!) ¿Hay alguna otra razón por la cual los números podrían estar desapareciendo? Sé por incendiario que tan pronto como me desmarque 'inline' regresan ...

la CSS es

ol{ 
padding: 20px; 
list-style-type:decimal; 
} 
ol li { 
display: inline; 
margin: 0 10px; 
padding: 0 10px; 
}

Fuente

2011-01-10 Damon

intente aumentar el valor de margen y ver si hace alguna diferencia – programmer

Sólo para ser exhaustivo, ¿ha intentado más de 10px? – jtbandes

No sé por qué sucede esto, pero se puede resolver mediante flotante a la izquierda en lugar de display:inline

Ver http://www.jsfiddle.net/CMKzK/

ol{ 
padding: 20px; 
    list-style-type:decimal; 

} 
ol li { 
float:left; 
margin: 0 10px; 
padding: 0 10px; 
}

Fuente

2011-01-10 05:29:12

Eso es bastante injusto, solo flotar para un diseño como este – baldrs

centrando el contenido flotante dinámico podría ser imposible –

Si no se preocupan por las versiones antiguas de IE, se puede utilizar automatic counters and numbering

De lo contrario, debe especificar los números manualmente (solución de @ Babiker) o float su li (solución de @Eric Fortis).

Fuente

2011-01-10 05:41:00 zzzzBov

Esto es increíble ... ¡Mucho mejor que flotadores! No puedo creer cuánto tiempo he sido un desarrollador front-end y no sabía de esto ... :( –

he conseguido solucionar el problema de los números ol siendo empujado por los elementos flotantes a la izquierda con lo siguiente:

li { 
    overflow:hidden; 
    list-style-position: inside; 
    display:block; 
} 
.number { 
    display:list-item; 
    position:absolute; 
} 
.first-item { 
    float:left; 
    /* revise margin to your needs */  
    margin-left:35px; 
} 
.second-item { 
    float:left; 
}

dado la siguiente DOM:

<ol id="playlist"> 

     <li> 
      <div class="number"></div> 
      <a class="first-item" href="#">click here</a> 
      <div class="second-item">some detail</div> 
     </li> 
</ol>

parece funcionar con inline -bloquean elementos también

Fuente

2012-08-29 19:52:18 hedgehog

Esto no parece funcionar con IE11. Todos los números de la lista son 1. – Tom

Puede probar esto:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Inline OL</title> 
    <style type="text/css"> 
     ol 
     { 
      /* List will start at 25 + 1 = 26 */ 
      /* Remove the 25 if you want to start at 1 */ 
      counter-reset: LIST-ITEMS 25; 
     } 

     li 
     { 
      display: inline; 
      padding-right: 0.5em; 
     } 

     li:before 
     { 
      content: counter(LIST-ITEMS) "."; 
      counter-increment: LIST-ITEMS; 
      padding-right: 0.25em; 
      font-style: italic; 
      font-weight: bold; 
     } 
    </style> 
</head> 
<body> 

<ol> 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li> 
    <li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li> 
    <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li> 
    <li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li> 
    <li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li> 
    <li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
</ol> 

</body> 
</html>

Fuente

2013-12-02 12:29:18 nico

¿cómo puedo mostrar los números en una lista ordenada en línea?

Respuesta

Cuestiones relacionadas