Busco para generar una salida similar a la siguiente:Horizontal lista ordenada (e IE)
1. One 2. Two 3. Three 4. Four
desde el código HTML siguiente
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
Parece que Internet Explorer no quiere muestre los números (elementos de la lista) cuando flote los li para hacerlos horizontales.
¿Alguien se ha encontrado con esto y ha encontrado una solución que puedo usar?
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>
css:
li { display:inline; }
Esta solución elimina los números de lista ordenados de los elementos en IE, Firefox, Opera y Safari. De su pregunta, supongo que quiere que se conserven. –
Se puede utilizar este CSS?
li {display: inline}
EDITAR: Esto no conserva la numeración de artículos, y no estoy al tanto de cualquier método que hace. 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.
Esta solución elimina los números de lista ordenados de los elementos en IE, Firefox, Opera y Safari. De su pregunta, supongo que quiere que se conserven. –
Buen punto ... Voy a ver si puedo encontrar algo y editarlo. –
He intentado li {display: inline; list-style-type: decimal; } pero no tuvo ningún efecto en los navegadores listados. –
no se puede establecer un ancho en los elementos en línea. así que por lo general terminan flotando en lugar
li
{
float: left;
width:30px;
}
Esta solución elimina los números de lista ordenados de los elementos en IE6, 7 y 8RC1, Google Chrome y Safari para Windows 3.2.2. Conserva los números de lista ordenados en Firefox 2, 3 y 3.1b2. De su pregunta, supongo que quiere que se conserven. –
He intentado todas las display propiedad en this page y ninguno de ellos preservar los números de lista ordenada cuando se muestra la lista horizontal en el IE (ni están preservados en Firefox, Opera o Safari para Windows, y por extensión probablemente Google Chrome, aunque admito que no probé todas las propiedades de display allí).
La única solución que (parcialmente, solo en Firefox) funciona es Al W's answer.
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.
¿Qué versión de Firefox oculta los números para usted? Los veo bien en FF3.0. Si eso es un error o no es discutible. –
@Bobby Lo que estaba diciendo es que los números de las listas ordenadas no se conservan cuando se usa 'li {display: inline; } ' Se conservan en Firefox cuando se usa 'li {float: left; ancho: 30px; } '(según la respuesta de Al W). –
Encontré this page about IE hasLayout útil. Incluye discusión de dicho formato de lista (el enlace apunta a la sección de listas de la página)
De acuerdo, debe agregar un flotante, ancho y tipo de lista de atributos a la CSS. Se ve así:
li{
float:left;
width:50px;
list-style-type:decimal;
}
Gushiken
No funciona en IE7 para mí. ¿Qué DOCTYPE estás usando? –
Trabajos. Como sugerencia, puede agregar esta línea después del final de la lista para evitar que el flotador se meta con otro contenido:
– LeeNo funciona en Chrome 26 – matheusvmbruno