0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <div class="container">
        <div class="row" style="background: pink;">

            <a style="position: relative">
                <img src="http://lorempixel.com/50/50">
                <p>Username</p>
                <ul style="position: absolute">
                    <li>
                        item item item item item item
                    </li>
                </ul>
            </a>

        </div>
    </div>

¿No se supone que el <ul> esta afuera del flujo y no tiene dimensiones definidas, debería ajustarse según su contenido es decir, seguirse estirando sin generar saltos de linea pero no lo hace y actúa como si tuviese un ancho definido?

¿Podrían explicarme esto?

¿Como puedo hacer para mandar mi enlace con position: relative al final del contenedor y que a su vez la alineación no afecte a la lista? es decir aunque el contenedor flex sea justify-content: flex-end; la lista igual se estire sin generar saltos de linea a causa de su contenido?

Esto ocurre por el display: flex que tiene la clase row pero si la quito, todo marcha bien. pero no se como alinear mi enlace junto con la lista posicionada de forma absoluta al final del contenedor.

1
  • A ver si te entiendo, el resultado que estas esperando es exactamente lo que te sale, pero queres que las palaras ITEM esten todas en la misma linea?
    – Agustin G.
    Commented el 27 oct. 2019 a las 20:14

1 respuesta 1

1

Te pasa eso porque la propiedad display : absolute se posiciona en relacion al primer padre que tenga la propiedad display distinta de initial o static. Si no hubiera ningun elemento con dichas clases, se posicionará respecto del html.

En este caso, el padre va a ser tu elemento a, (ya que tiene la propiedad display : relative), que tiene ese ancho que te provoca la duda. Lo solucionas agregando width: 100% a este elemento a.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <div class="container">
        <div class="row" style="background: pink;">

            <a style="position: relative; width:100%">
                <img src="http://lorempixel.com/50/50">
                <p>Username</p>
                <ul style="position: absolute">
                    <li>
                        item item item item item item
                    </li>
                </ul>
            </a>

        </div>
    </div> 

1

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.