Flex не выравнивается правильно, когда ширина установлена - PullRequest
Новая
       25

Flex не выравнивается правильно, когда ширина установлена

0 голосов
/ 28 июня 2018

У меня есть следующая ручка с Tailwind CSS https://codepen.io/SuddenlyRust/pen/zaMBoW

<ul class="max-w-xs w-full list-reset">
    <li class="flex border-b-2 border-dashed py-2">
        <div class="w-8">1</div>

        <h4>
            <a href="#" class="text-black no-underline hover:underline">First steps with flex</a>
        </h4>

        <span class="ml-auto">9:00</span>
    </li>

    <li class="flex border-b-2 border-dashed py-2">
        <div class="w-8">12</div>

        <h4>
            <a href="#" class="text-black no-underline hover:underline">How to align the bullets points correct</a>
        </h4>

        <span class="ml-left">19:00</span>
    </li>
</ul>

Точки моего маркера слева не будут иметь одинаковую ширину. Я дал им ширину 2,5 мм, но браузер рассчитывает разную ширину в пикселях для обоих. Кто-нибудь знает, как я могу все правильно выровнять. Потому что, когда у меня длинный список, я хочу выровнять текст по центру. Или, может быть, есть лучшее решение для этой проблемы?

enter image description here

1 Ответ

0 голосов
/ 28 июня 2018

Проблема заключалась в том, что со свойством flexbox ширина первого содержимого «первый шаг с гибкостью» меньше по сравнению со вторым «Как правильно выровнять точки маркера», поэтому flex сжимает ширину второго, чтобы исправить эту ширину применения 100 % к тегам h4. 

<ul class="max-w-xs w-full list-reset">
    <li class="flex border-b-2 border-dashed py-2">
        <div class="w-8">1</div>

        <h4 class="w-full">
            <a href="#" class="text-black no-underline hover:underline">First steps with flex</a>
        </h4>

        <span class="ml-auto">9:00</span>
    </li>

    <li class="flex border-b-2 border-dashed py-2">
        <div class="w-8">12</div>

        <h4 class="w-full">
            <a href="#" class="text-black no-underline hover:underline">How to align the bullets points correct</a>
        </h4>

        <span class="ml-left">19:00</span>
    </li>
</ul>

пример кода ручки

...