CODEWITHSUNDEEP
cssflexboxtailwind-css
ruslansteiger
ruslansteiger

Reputation: 552

Flex does not align correctly when width set

I have following Pen with 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>

My Bullet points on the left won't set the same width. I gave them width of 2.5rem but the browser calculates different width in px for both. Does someone know how I can align everything correct. Because when I have a long list I want to align the text in the center. Or maybe there is a better solution for this problem?

enter image description here

Upvotes: 1

Views: 310

Answers (1)

Vijay
Vijay

Reputation: 176

The problem was with the flexbox property the first content "first step with flex" width is less compared to the second "How to align the bullets points correct" so flex shrinks the width of the second to fix this apply width of 100% to the h4 tags.

<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>

example codepen

Upvotes: 2

Related Questions