宽度设置时，Flex不能正确对齐。

Question

我用尾风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.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>

示例代码