Así que quiero mostrar <li> elementos en línea. Pero cuando uso la propiedad display:inline en CSS, las viñetas se ocultan. Probé 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? Consulte el JSFiddle

2
Tr0jAn 27 nov. 2021 a las 11:38

3 respuestas

La mejor respuesta

Puede usar display: flex; para la clase 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>
2
kian 27 nov. 2021 a las 11:46
¡Funcionó gracias!
 – 
Tr0jAn
27 nov. 2021 a las 11:51

Puede utilizar estos estilos.

.list{
    display: inline;
 }
 .list-inline li{
    margin: 10px;
 }
 .list-inline{
    display: flex;
 }

¿Es esto lo que quieres? ¡Puedes convertir el ul en una caja flexible! Si desea saber más sobre viñetas en css, consulte estos documentos de w3schools👇

https://www.w3schools.com/css/css_list.asp

2
Ambareesh 27 nov. 2021 a las 11:51

Creo que inline niega la viñeta, pero usar 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>
2
Authentic Science 27 nov. 2021 a las 11:51