0

Hola estoy creando una copia de la pagina principal de búsqueda de Google. Estoy creando el footer con un grid para crear los dos espacios y darles los atributos. Mi pregunta es como puedo hacer que la linea que separa los dos rows sea de color blanco y de anchura un px. Dejo una imagen de como quiero que queda y de como esta quedando.

Como quiero que quede: Como quiero que quede la linea

Como me esta quedando sin la linia: Como me esta quedando sin la linia

Como veis en mi grid no consigo hacer aparecer esa fina linia que divide los dos rows. Adjunto codigo HTML y CSS a ver si alguien me puede hechar una mano:

Codigo HTML:

<footer class="grid">
        <ul class="footer-top">
            <li>
                <a href="">España</a>
            </li>
        </ul>
        <ul class="footer-top2">
            <li>
                <a href=""></a>
            </li>
        </ul>
        <ul class="footer-top3">
            <li>
                <a href=""></a>
            </li>
        </ul>
        <ul class="footer-left">
            <li>
                <a href="">Publicidad</a>
            </li>
            <li>
                <a href="">Empresa</a>
            </li>
            <li>
                <a href="">Cómo funciona la Búsqueda</a>
            </li>
        </ul>

        <ul class="footer-center">
            <li>
                <a haref="">Emisión neutra de carbono desde el 2007</a>
            </li>
        </ul>

        <ul class="footer-right">
            <li>
                <a href="">Privacidad</a>
            </li>
            <li>
                <a href="">Condiciones</a>
            </li>
            <li>
                <a href="">Preferencias</a>
            </li>
        </ul>
    </footer>
    

Codigo CSS:

.grid{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    display: grid;
    grid-template-columns: 30% 36% 33%;
    grid-template-rows: [y0] 50% [y1] 50%;
    align-items: center;
    font-size: 14px;
    border-top: 1px solid #e4e4e4;
    background: #f2f2f2;
    border-top-color:1px solid #f2f2f2;


}


.grid ul{
    margin: 10px;
    list-style: none;
    display: flex;
    padding-left: 25px;
    padding-right: 2px;
}

footer .footer-left{
    justify-self: left;

}

footer .footer-center{
    justify-self: center;
    padding-left: 25%;
    margin: 25px;

}

footer .footer-right{
    justify-self: right;
}

footer ul li a{
    margin: 10px;
    color: #5f6368;
}

1 respuesta 1

0

Prueba añadir esto en tu CSS:

ul[class*='footer-top'] {
  border-bottom: 1px solid gray;
  width: 100%;
  padding: 0 0 16px 0;
}

Y para que la línea llegue al borde del lado izquierdo, puedes cambiar el

.grid ul {margin: 10px;} por .grid ul {padding: 10px;}

2
  • Y para que la línea llegue al borde del lado izquierdo, puedes cambiar el .grid ul {margin: 10px;} por .grid ul {padding: 10px;}
    – Lyra
    el 5 oct. 2022 a las 10:05
  • Mil gracias me ha funcionado perfectamente el 5 oct. 2022 a las 16:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.