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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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