Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » DUDA SOBRE FLOTAR UNA LISTA

HTML - DUDA SOBRE FLOTAR UNA LISTA

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Tanya

DUDA SOBRE FLOTAR UNA LISTA

Publicado por Tanya (1 intervención) el 26/10/2021 23:25:20
Hola buenas, soy nueva en este foro y la verdad que me preguntaba si me podiais ayudar a flotar una lista en el sitio correcto del footer, el contexto es el siguiente:

Captura

Bien, ¿Veis la lista que dice "Premier Delivery" etc...? La cuestion es que quiero que flote al lado de la otra y no sé si hay algo empujando y no me dan las neuronas como para solucionarlo pero es que tengo el cerebro haciendo palomitas porque he probado con margins, paddings, displays y floats.

Este es el HTML del footer:
listahtml

Y este es su CSS correspondiente:
css



¡Saludos y muchas gracias de antemano!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de 7aamin
Val: 1
Ha aumentado su posición en 46 puestos en HTML (en relación al último mes)
Gráfica de HTML

DUDA SOBRE FLOTAR UNA LISTA

Publicado por 7aamin (16 intervenciones) el 27/10/2021 00:02:27
Hola Tanya, usar float creo que es el pasado, personalmente para mi, float es un dolor de cabeza, para eso llego Flexbox que te soluciona la vida muy facilmente.

No te voy a resolver tu problema, porque creo que lo mejor es que aprendas por tu cuenta, pero si te voy a dar un ejemplo muy parecido para que entiendas como usar lo mas basico de flexbox:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
    #cajaPadre {
        width:600px;
        height:200px;
        display:flex;
        border:1px solid black;
        justify-content:center;
        align-items: center;
        /*conviertes en flex a la caja padre
        y automaticamente los hijos se ponen uno al lado del otro
        con justify-content centras los hijos verticalmente
        con align-items centras los hijos horizontalmente
        */
    }
 
    #hijo1 {
        width:200px;
        height:100px;
        background-color: red;
    }
 
    #hijo2 {
        width:200px;
        height:100px;
        background-color: green;
    }
</style>
</head>
<body>
    <div id="cajaPadre">
        <div id="hijo1"></div>
        <div id="hijo2"></div>
    </div>
</body>
</html>
UYT

Espero hayas comprendido, te recomiendo que practiques con este codigo cambiando los valores de justify-content y de align-items
Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar