Mostrar viñetas de listas dentro del elemento

Lincejay

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
23 Jul 2019
Mensajes
793
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í:

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

Mentito

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
5 Abr 2015
Mensajes
408
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;
  }
 
Última edición:

Jxit3

Eta
Programador
Verificación en dos pasos desactivada
¡Ha verificado su Paypal!
Desde
25 Sep 2012
Mensajes
1.376
con css grid lo logras
 

Lincejay

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
23 Jul 2019
Mensajes
793
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

Eta
Programador
Verificación en dos pasos desactivada
¡Ha verificado su Paypal!
Desde
25 Sep 2012
Mensajes
1.376
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

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
23 Jul 2019
Mensajes
793

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba