Cómo hacer que las viñetas de lista queden dentro del borde con CSS

Lincejay · 3 May 2021

Hola betas.
Tengo un problema que no puedo resolver.
Quiero añadir en un bloque dos columnas y agregarle un borde con css pero las viñetas de la lista queda por fuera del borde.
Queda así:

He intentado varias cosas pero no se casí nada de css.
Alguien sabe como puedo hacer para que queden dentro del borde?

Mentito · 3 May 2021

Haciendo uso de flexbox puedes mejorarlo.

Esto en el html:

HTML:

<div class="flex-container">
<div class="flex-item">
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ul>
</div>
<div class="flex-item">
<ul>
<li>Lista 4</li>
<li>Lista 5</li>
<li>Lista 6</li>
</ul>
</div>

Coloca esto en el css.

CSS:

/**Estilo listas CSS**/
.flex-container{
  display: flex;
  border: 1px solid #bbb;
  justify-content: space-around;
  align-items: center;
}

/**Para adaptar listas a dispositivos móviles**/
@media screen and (max-width:500px){
  .flex-container{
    display: flex;
    flex-direction: column;
  }

Jxit3 · 9 May 2021

con css grid lo logras

Lincejay · 9 May 2021

Jxit3 dijo:
con css grid lo logras

Al final lo arregle con css.
Le di una clase css al bloque y después le di padding al elemento, no se si sea la forma correcta pero así lo resolví.

Jxit3 · 9 May 2021

Lincejay dijo:
Al final lo arregle con css.
Le di una clase css al bloque y después le di padding al elemento, no se si sea la forma correcta pero así lo resolví.

si eso es valido también, pero css grid te sacara de apuros en el futuro, es re fácil aprenderlo

Lincejay · 9 May 2021

Jxit3 dijo:
si eso es valido también, pero css grid te sacara de apuros en el futuro, es re fácil aprenderlo

Gracias por el consejo.

Cómo hacer que las viñetas de lista queden dentro del borde con CSS

Lincejay Seguir

Mentito

Jxit3

Lincejay

Jxit3

Lincejay