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>