Cómo a la pantalla de lista desordenada en línea con las balas?

StackOverflow https://stackoverflow.com/questions/34399

  •  09-06-2019
  •  | 
  •  

Pregunta

Tengo un archivo html con una lista desordenada.Quiero mostrar la lista de elementos de manera horizontal, pero aún así mantener las balas.No importa lo que yo trato, siempre que me ajuste el estilo en línea para cumplir con el requisito horizontal que no puede obtener de las viñetas a la pantalla.

¿Fue útil?

Solución

La mejor opción que he visto en otras respuestas fue el uso de float:left;.Por desgracia, no funciona en IE7, que es un requisito de aquí* — aún perder la bala.No estoy realmente interesado en el uso de una imagen de fondo, ya sea.

Qué voy a hacer en su lugar (que nadie se sugiere, por lo tanto la auto-respuesta) es ir con la adición manual de • a mi html, en lugar de este estilo.Es menos que ideal, pero es el más compatible con la opción que he encontrado.

editar: *Lectores actuales tomar nota del original fecha de publicación.IE7 es poco probable que sea una preocupación más.

Otros consejos

Yo tenía el mismo problema, pero solo en Internet Explorer (he probado la versión 7) - no en Firefox 3, Safari 3.El uso de la :antes de selector funciona para mí:

ul.tabs li {
  list-style: none;
  float: left;
}
ul.tabs li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

Estoy usando un cuadrado de bala aquí, pero una bala normal \2022 sería el mismo.

Usted también podría usar una imagen de fondo en la <li> elementos, con un acolchado para mantener el texto a partir de la superposición es.

li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}

El navegador muestra las balas porque el estilo de la propiedad "display" es el principio para "list-item".Cambio de la visualización de la propiedad a "en línea" cancela todos los estilos especiales que elementos de la lista de llegar.Usted debe ser capaz de simular con el :antes de selector y la propiedad de contenido, pero IE (al menos a través de la versión 7) no es compatible.La simulación con una imagen de fondo es, probablemente, el mejor cross-browser para hacerlo.

En realidad es un muy fácil de solucionar.Agregue lo siguiente a la ul:

display:list-item;

La adición de este CSS línea de agregar los puntos de las viñetas.

Mantenerlos pantalla bloqueada, darles un ancho y flotar a la izquierda.

Que hará que ellos se sientan al lado del otro, que es como en línea, y debe mantener el estilo de lista.

Intenta 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>

Yo sólo he probado Firefox 3.0.1, trabaja allí.El margin se establece porque, de lo contrario su bala se superpone con el elemento anterior.

además:Ser cautelosos de que al flotar los elementos que eliminarlos de la normal de flujo, que a su vez hace que el <ul/> no tener la altura.Si desea añadir un borde o algo, usted obtendrá resultados extraños.

Una forma de solucionar eso es para agregar lo siguiente a sus estilos:

ul {
    overflow: auto;
    background: #f0f;
}

Yo sólo estaba jugando y me encontré con el mismo problema con el mismo las limitaciones del navegador;cuando busqué una respuesta en tu post se acercó sin la respuesta.Este es probablemente demasiado tarde para ayudar a usted, pero yo pensaba que para la posteridad del bien que debo publicar.

Todo lo que hice para solucionar mi problema fue a incrustar otra lista con un elemento dentro de cada elemento de la lista de la primera lista;como 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 un tonto solución, pero parece que funciona.

Usted podría utilizar entidades de Caracteres, consulte la referencia : http://dev.w3.org/html5/html-author/charref

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>

En HTML, he añadido un descanso después de cada li como este:

<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; }

Usted puede utilizar el código siguiente

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top