设置宽度后,Flex 无法正确对齐
Flex does not align correctly when width set
我有跟随 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>
我左边的项目符号点不会设置相同的宽度。我给了它们 2.5rem 的宽度,但浏览器为两者计算了不同的宽度(以 px 为单位)。有人知道我如何才能正确对齐所有内容。因为当我有一个长列表时,我想将文本居中对齐。或者这个问题可能有更好的解决方案?
问题出在 flexbox 属性 第一个内容 "first step with flex" 宽度比第二个 "How to align the bullets points correct" 小,所以 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>
我有跟随 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>
我左边的项目符号点不会设置相同的宽度。我给了它们 2.5rem 的宽度,但浏览器为两者计算了不同的宽度(以 px 为单位)。有人知道我如何才能正确对齐所有内容。因为当我有一个长列表时,我想将文本居中对齐。或者这个问题可能有更好的解决方案?
问题出在 flexbox 属性 第一个内容 "first step with flex" 宽度比第二个 "How to align the bullets points correct" 小,所以 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>