Tengo un archivo html con una lista desordenada. Quiero mostrar los elementos de la lista horizontalmente pero aun así mantener las viñetas. No importa lo que intento, cada vez que configuro el estilo en línea para cumplir con el requisito horizontal no puedo obtener las viñetas para mostrar.Mostrar lista desordenada en línea, pero mantener las viñetas
La mejor opción que vi en otras respuestas fue usar float:left;. Lamentablemente, no funciona en IE7, que es un requisito aquí * — aún así pierde la bala. No estoy muy interesado en usar una imagen de fondo tampoco.
Lo que voy a hacer en su lugar (que nadie más sugirió, de ahí la auto-respuesta) es ir añadiendo manualmente • al mi html, en lugar de diseñar esto. No es ideal, pero es la opción más compatible que encontré.
edición: * lectores actuales tome nota de la fecha de entrada original. Es poco probable que IE7 sea una preocupación más.
¿Has probado float: left en tu <li/>? Algo como esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
Solo probé Firefox 3.0.1, funciona allí. El margin está configurado porque, de lo contrario, su viñeta se superpone al elemento anterior.
Además: Tenga cuidado de que cuando flote los elementos los elimine del flujo normal, lo que a su vez hace que el <ul/> no tenga altura. Si desea agregar un borde o algo así, obtendrá resultados extraños.
Una forma de solucionar esto es añadir lo siguiente a sus estilos:
ul {
overflow: auto;
background: #f0f;
}
Esto me ayudó. Flotar fue el truco. – Maddhacker24
También es posible usar una imagen de fondo en la <li> elementos, con un acolchado para mantener el texto de la superposición de la misma.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
El uso de viñetas gráficas lamentablemente no es una solución muy buena en este momento porque cuando el usuario amplía el texto, estas imágenes no se escalarán en consecuencia (o peor, pixeladas). Podemos esperar que en unos pocos años ya no sea un problema (usando gráficos vectoriales y confiando en el navegador web para escalar imágenes y texto por igual). –
El navegador muestra las viñetas porque la propiedad de estilo "pantalla" se establece inicialmente en "elemento de lista". Cambiar la propiedad de visualización a "en línea" cancela todos los estilos especiales que obtienen los elementos de la lista. Debería poder simularlo con el: antes del selector y la propiedad del contenido, pero IE (al menos hasta la versión 7) no los admite. Simularlo con una imagen de fondo es probablemente la mejor forma de hacerlo.
Manténgalas visualizadas bloqueadas, deles ancho y flote a la izquierda.
Eso hará que se sienten al lado, que es como en línea, y debe mantener el estilo de la lista.
Quiere decir * mostrar: elemento de lista * en lugar de * mostrar: bloque * –
que tenían el mismo problema, pero sólo en Internet Explorer (he probado la versión 7) - no en Firefox 3 o Safari 3. Uso de la : Selector antes funciona para mí:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I Estoy usando una bala cuadrada aquí, pero una bala normal \ 2022 funcionaría igual.
... excepto que esto tampoco funciona en IE7, porque eso no admite el selector: before. –
Puede utilizar siguiente código
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
En realidad es una solución muy simple. Agregue lo siguiente al ul:
display:list-item;
Agregar esta línea de CSS agregará los puntos de viñeta.
Si lee otras respuestas/comentarios, verá que esto no fue respaldado por un navegador requerido en ese momento. Ahora ... esto podría funcionar bien. –
Se puede usar entidades de caracteres, véase la referencia: http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
Estaba jugar un poco y me encontré con el mismo problema con las mismas limitaciones del navegador; cuando busqué una respuesta, tu publicación salió sin la respuesta. Probablemente sea demasiado tarde para ayudarlo, pero pensé que para la posteridad debería publicarlo.
Todo lo que hice para resolver mi problema fue insertar otra lista con un elemento dentro de cada elemento de la lista de la primera lista; así ...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Página:
o a o b o c
... es una solución mudo, pero parece trabajo.
En HTML, he añadido un descanso después de cada li así:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
y CSS:
li { float:left; }
Si selecciono todo en la lista y copio, obtengo viñetas de HTML en mi texto cuando pego. Bruto. Me gusta la alternativa: usar una imagen de fondo. – Matthew
@Matthew - no era una opción en ese momento. La solución adoptada en los 4 años posteriores a esto fue mover a todos a IE8, donde había opciones más sensatas disponibles. –
Lamento traer viejos fantasmas (sé que IE7 puede ser un poco espeluznante). Encontré esto a través de una búsqueda en Google y pensé que debería mencionar ese punto. – Matthew