css - una - Lista Ordenada Horizontal(e IE)

two columns list css

Question

Estoy buscando generar un resultado similar a esto:

1. One      2. Two      3. Three      4. Four

del siguiente código HTML

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ol>

Parece que Internet Explorer no desea mostrar el número (elemento de la lista) cuando se flotan las li para que sean horizontales.

¿Alguien se ha encontrado con esto y ha encontrado una solución que puedo usar?

Answer 1

¿Puedes usar este CSS?

li  {display: inline}

EDITAR : Esto no conserva la numeración de los elementos, y no conozco ningún método que lo haga. Como sustituto, supongo que todo lo que puedes hacer es insertar los números manualmente, hasta que los navegadores reciban un mejor soporte para los contadores de CSS.

Answer 2

css:

li { display:inline; }

Answer 3

no puede establecer un ancho en elementos en línea. así que generalmente termino flotando en su lugar

li
{
    float: left;
    width:30px;
}

Answer 4

Bien, necesitas agregar un float, ancho y tipo de estilo de lista al css. Se ve como esto:

li{ float:left; width:50px; list-style-type:decimal; }

Gushiken

Answer 5

Encontré esta página sobre IE hasLayout útil. Incluye la discusión de dicho formato de lista (el enlace apunta a la sección de listas de la página)

Answer 6

Este código funciona en todos los navegadores que he probado. Si todavía no ha encontrado una respuesta, la sugerencia sobre la respuesta más popular es válida. Simplemente ajuste su ancho si desea que se ajuste.

<ol style="list-style-type:decimal; width: 600px;">
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
    <li style="float: left; width: 200px; padding: 2px 0px;">Test</li>
</ol>

ol.horizontal{
    list-style-type: decimal;
    width: 600px;
}

ol.horizontal li{
    float: left;
    width: 200px;
    padding: 2px 0px;
}

<ol class="horizontal">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ol>

Answer 7

He probado todas display propiedades de display en esta página y ninguna de ellas conserva los números de lista ordenada cuando se muestra la lista horizontalmente en IE (ni se conservan en Firefox, Opera o Safari para Windows, y por extensión, probablemente, Google Chrome, aunque admito No probé todas display propiedades de display allí).

La única solución que (parcialmente, solo en Firefox) funciona es la respuesta de Al W.

Creo que si quieres una lista numerada horizontal, vas a tener que generarla en el servidor o manipular la lista en el cliente usando JavaScript para volver a insertar los números.