2

Estoy intentando dejar los enlaces al margen derecho del div como se muestra en el ejemplo, el problema esta en que los enlaces aunque estén posicionados a la derecha son clickables en todo el ancho del div, y yo solo quiero que sea posible clickarlos tan solo si pinchas encima del propio texto del enlace

div{
    position: relative;
    width: 33%;
    height: auto;
    text-align: end;
    overflow: hidden;
    background: darksalmon;
}

h4{
    color: black;
    padding-top: 25px;
    padding-right: 10%;
}

a{
    display: block;
    position: relative;
    color: black;
    padding-right: 10%;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>prueba para stackoverflow</title>
</head>
<body>
    <div>
        <h4>Links</h4>
        <a href="{% url 'list_articles' %}">Articulos</a>
        <a href="{% url 'list_products' %}">Tienda</a>
        <a href="{% url 'listar_eventos' %}">Eventos</a>
        <a href="{% url 'list_gallery' %}">Galeria</a>
        <a href="#">Terminos Y Condiciones</a>
    </div>
</body>
</html>

2 respuestas 2

1

La solución más simple y rápida está en el estilo del elemento .

a{
    display: block;
    position: relative;
    color: black;
    width: fit-content;
    margin:0 10% 0 auto;
}

Como ves pongo un ancho al elemento adaptado al contenido y uso margin para alinear. No tienes que modificar nada en la estructura html.

2
  • lo único que poner fit-content no es compatible con muchos navegadores, verdad?
    – solnegro88
    el 7 jul. 2021 a las 11:32
  • Ahora mismo prácticamente con todos, pero si que está marcado como tecnología experimental developer.mozilla.org/es/docs/Web/CSS/…
    – Juan
    el 7 jul. 2021 a las 11:57
1

Utilizando el modelo flexbox puedes alinear los bloques a la derecha. Y para que el link solo actúe en el texto cambia el padding por margin. Tendrías que modificar div y a:

div{
    position: relative;
    display:flex;
    flex-direction: column;
    width: 33%;
    height: auto;
    overflow: hidden;
    background: darksalmon;
    align-items: flex-end;
}

h4{
    color: black;
    padding-top: 25px;
    padding-right: 10%;
}

a{
    display: block;
    position: relative;
    color: black;
    margin-right: 10%;
}

Espero que te sirva.

1
  • Como añadido a la respuesta, diría de dar el padding al <div> en vez de a sus hijos. Si no por cada nuevo hijo vas a tener que darle el mismo y se puede hacer un poco engorroso de mantener. Mejor que el padre marque los límites de su contenido que para eso fue inventada está propiedad ^^
    – phpMyGuel
    el 7 jul. 2021 a las 11:24

Tu Respuesta

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

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