html - sublime - ¿Por qué desaparece el estilo de lista cuando se muestra display: el bloque se agrega a un elemento de lista en una lista(<ul> o<ol>)?

listas en html ejemplos

Question

Esto parece válido para la display: inline; y display: inline-block; también.

Esto es lo que quiero decir:

ul li {
display: block;
/* Or display: inline; */
/* Or display: inline-block; */
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>

Y con estilo de lista me refiero a las "viñetas" o "números" reales (cuando se usa <ol> )

Answer 1

Esto se debe a que normalmente, la display se establece en list-item de list-item para list-item <li> . Consulte la especificación CSS3 del W3C: http://www.w3.org/TR/css3-lists/#declaring-a-list-item .

Para declarar un elemento de la lista, la propiedad ''mostrar'' se debe establecer en ''elemento de la lista''.

Tenga en cuenta que puede dar a los elementos HTML arbitrarios el mismo comportamiento; set display: list-item en un <div> por ejemplo.

Answer 2

La respuesta de Martin es verdadera, pero no proporciona una solución, y Pappy''s solo es relevante si quiere balas o si tiene fácil acceso a lo que será el identificador del li . En mi caso, necesito tener un ol con upper-alpha lo que no es posible.

La forma más corta de evitar esto para nosotros fue colocar una propiedad en línea (en inline , en inline-block , en inline-flex ), así como en vertical-align: top en el elemento secundario inmediato de li :

ol {
list-style: upper-alpha;
> li {
display: block;
}
}
.list-item-content {
display: inline-block; // any inline property will work
vertical-align: top;
}

<ol>
<li>
<div class="list-item-content">Some text</div>
</li>
</ol>

Answer 3

Solucion para ul

ul {
list-style: none;
display: block;
padding: 0;
}
ul li::before {
content: "• ";
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>

Solución para ol usando el counter-increment

ol {
list-style: none;
display: block;
padding: 0;
counter-reset: my-counter;
}
ol li {
counter-increment: my-counter;
}
ol li::before {
content: counter(my-counter) ". ";
}
<ol>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ol>

Answer 4

Una forma de conseguir el efecto sería:

<ol>
<li>
<a href="mylink">desc</a>
</li>
</ol>

CSS:

li {
list-style-position: inside;
display: inline-block; /* or block */
}
li a {
display: list-item;
padding: 10px 20px;
}

Answer 5

Una solución actualizada es hacer uso de :before y content .

Ver este JSfiddle para un ejemplo de trabajo. http://jsfiddle.net/t72h3/

ul li {
display: inline-block;
}
ul li:before {
content: "• ";
}
<ul>
<li>list item1</li>
<li>list item3</li>
<li>list item3</li>
</ul>