html - una - Mostrar lista desordenada en línea, pero mantener las viñetas
listas numeradas html (11)
¿Intentó float: left en su <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 se establece 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 solucionarlo es agregar lo siguiente a sus estilos:
ul {
overflow: auto;
background: #f0f;
}
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.
El navegador muestra las viñetas porque la propiedad de estilo "mostrar" 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.
En HTML, agregué 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; }
En realidad es una solución muy simple. Agregue lo siguiente a la ul:
display:list-item;
Agregar esta línea de CSS agregará los puntos de viñeta.
Estaba jugando 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; al igual que...
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; }
Página IE7:
o a o b o c
... es una solución tonta, pero parece funcionar.
Mantenga la pantalla bloqueada, proporcióneles un ancho y flote a la izquierda.
Eso los hará sentarse al lado, lo cual es como estar en línea, y debe mantener el estilo de la lista.
Puede usar entidades de caracteres, ver referencia: http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
Puedes usar el siguiente código
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
También podría usar una imagen de fondo en los elementos <li>, con un relleno para evitar que el texto se superponga.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
Tuve el mismo problema, pero solo en Internet Explorer (probé la versión 7), no en Firefox 3 o Safari 3. Usar el selector : before funciona para mí:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: ''/ffed'';
margin-right: 0.5em;
}
Estoy usando una bala cuadrada aquí, pero una bala normal / 2022 funcionaría igual.
La mejor opción que vi en otras respuestas fue usar float:left; . Desafortunadamente, no funciona en IE7, que es un requisito aquí * - aún así pierdes 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 agregando manualmente • al mi html, en lugar de diseñar esto. No es ideal, pero es la opción más compatible que encontré.
editar : * Los lectores actuales toman nota de la fecha de publicación original. Es poco probable que IE7 sea una preocupación más.