Entonces quiero mostrar <li> elementos en línea. Pero cuando uso la propiedad display:inline en las viñetas CSS se oculta. Intenté esto desde Pregunta
HTML
<div class="list"> <ul class="list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </div>y el CSS
.list{ display: inline; } .list-inline li{ margin: 10px; display: inline; } display: inline parece funcionar pero las viñetas se ocultan . ¿Cómo puedo arreglar esto? Mira el JSFiddle
puedes usar display: flex; para la clase de list-inline .
.list{ display: inline; } .list-inline { display: flex; } .list-inline li{ margin: 10px; /* display: inline; */ } <div class="list"> <ul class="list-inline"> <li>Hi</li> <li>Hi</li> <li>Hi</li> <li>Hi</li> <li>Hi</li> <li>Hi</li> <li>Hi</li> </ul> </div>Puedes usar estos estilos.
.list{ display: inline; } .list-inline li{ margin: 10px; } .list-inline{ display: flex; }¿Es esto lo que quieres? ¡Puedes hacer que la ul sea una caja flexible! Si quieres saber más sobre viñetas en css, mira estos documentos de w3schools👇
Creo que inline niega la viñeta, pero usando flex con flex-direction: row; en la declaración ul tendrá el efecto que está buscando...
ul { flex-direction: row; display: flex; } .list { } .list-inline li { margin: 10px; } <div class="list"> <ul class="list-inline"> <li>Hi</li> <li>Hi</li> <li>Hi</li> <li>Hi</li> <li>Hi</li> <li>Hi</li> <li>Hi</li> </ul> </div>