Блог

Главная - Вопросы по программированию - Как в tailwindcss сделать нижний колонтитул с 2 кнопками отмены и сохранения выровненным по правому краю

Как в tailwindcss сделать нижний колонтитул с 2 кнопками отмены и сохранения выровненным по правому краю

#tailwind-css

#tailwind-css

Вопрос:

С помощью tailwindcss я делаю нижний колонтитул с 2 кнопками отмены и сохранения выровненным по правому краю:

 <div class="p-2 flex">
    <div class="w-1/2">Empty Space</div>
    <div class="w-1/2">
        <button type="submit" class="bg-gray-500 text-white p-2 rounded text-sm w-auto float-right">
            Cancel
        </button>
        <button type="submit" class="bg-yellow-500 text-white p-2 ml-6 rounded text-lg w-auto float-right ">
            Save
        </button>
    </div>
</div>

Это работает, но мне нужно другое: отменить выравнивание сразу после сохранения, а не так, как мне нужно.

Какой путь правильный?

Спасибо!

Комментарии:

1. I need : Cancel aligned right after save, not beofre as I need не могли бы вы объяснить?

2. Если вы добавите быстрый рисунок, объясняющий, что вы хотите, это было бы полезно

3. Мне нужно вот так: prnt.sc/yuq18z

Ответ №1:

Я предпочитаю использовать flex justify-end в родительском элементе вместо использования float-right 

 <div class="p-2 flex">
    <div class="w-1/2">Empty Space</div>
    <div class="w-1/2 flex justify-end">
        <button type="submit" class="bg-gray-500 text-white p-2 rounded text-sm w-auto">
            Cancel
        </button>
        <button type="submit" class="bg-yellow-500 text-white p-2 ml-6 rounded text-lg w-auto">
            Save
        </button>
    </div>
</div>

Вот пример использования Tailwind Play

https://play.tailwindcss.com/CY54ArgXe4

Ответ №2:

float-right элементы будут располагаться справа налево, поэтому вам просто нужно переключить порядок кнопок отмены и сохранения:

 <div class="p-2 flex">
    <div class="w-1/2">Empty Space</div>
    <div class="w-1/2">
        <button type="submit" class="bg-yellow-500 text-white p-2 ml-6 rounded text-lg w-auto float-right ">
            Save
        </button>
        <button type="submit" class="bg-gray-500 text-white p-2 rounded text-sm w-auto float-right">
            Cancel
        </button>
    </div>
</div>