0

Estoy usando Tailwind, en mi menu quiero que se vea algo asi: introducir la descripción de la imagen aquí

<div class="navigation flex justify-between  items-center container">
  <vex-navigation-item></vex-navigation-item>
</div>

Sin embargo cuando coloco otra clase como "justify-center" o "justify-end" si me funciona.

justify-center: introducir la descripción de la imagen aquí

Justify-end introducir la descripción de la imagen aquí

Pero cuando coloco "justify-between" me coloca me esta colocando los items al principio dejando todo ese espacio sobrante para el final introducir la descripción de la imagen aquí

2
  • Intenta darle este estilo a tu div style="width: 100% !important" Commented el 16 feb. 2023 a las 19:41
  • Hola Juan, sería conveniente que agregarás un mínimo de código para poder reproducir tu problema, aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener tu primer medalla! Commented el 16 feb. 2023 a las 19:43

1 respuesta 1

1

Lo que entiendo esta sucediendo es que tu componente vex-navigation-item esta conteniendo el menu que te muestra por esta razón al darle justify-center

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-blue-500 flex justify-between align-center">
  <div class="p-10 bg-blue-200">A</div>
  <div class="p-10 bg-blue-200">B</div>
  <div class="p-10 bg-blue-200">C</div>
</div>

ahora bien lo que hay que entender es que esta funcionando correctamente todo, sin embargo tu menú no esta funcionando de acuerdo a lo que buscas.

Tomando en cuenta el ejemplo anterior en la opción B vamos a agreegar todo tu menú:

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-blue-500 flex justify-between">
  <div class="p-1 bg-blue-200">Item x</div>
  <div class="p-10 bg-red-200 flex justify-center">
    <div class="text-green-500">Item 1</div>
    <div class="">Item 2</div>
    <div class="text-green-500">Item 3</div>
    <div class="">Item 4</div>
  </div>
  <div class="p-1 bg-blue-200">Item z</div>
</div>

en tu caso es como si item x no existiera. debes verificar como esta generando el html para que agreges las correspondientes clases.

<script src="https://cdn.tailwindcss.com"></script>

    <div class="bg-blue-500 flex justify-between">
      <div class="p-10 bg-red-200 flex justify-center">
        <div class="text-green-500">Item 1</div>
        <div class="">Item 2</div>
        <div class="text-green-500">Item 3</div>
        <div class="">Item 4</div>
      </div>
      <div class="p-1 bg-blue-200">Item z</div>
    </div>

Por esta razon tu menú es empujado a la izquierda.

Espero te sirva. Saludos.

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.