设置宽度时，Flex无法正确对齐

Question

我使用Tailwind CSS https://codepen.io/SuddenlyRust/pen/zaMBoW

关注了Pen

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

我左侧的Bullet点不会设置相同的宽度。我给了它们2.5rem的宽度，但是浏览器为两者计算了不同的px宽度。有人知道我怎样才能正确地调整一切。因为当我的清单很长时，我想使文本居中对齐。也许对此问题有更好的解决方案？

Answer 1

问题在于flexbox属性，第一个内容“具有flex的第一步”的宽度小于第二个内容“如何正确对齐子弹点”，因此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>

example codepen