我有一個水平的項目列表,當一行文字有 2 行時,會有一些額外的空間,並且其 flex 兄弟元素會延伸到整個高度。
這是原始碼:
<li class="flex">
<code class="flex-none text-sm whitespace-normal mr-2 mt-0.5 bg-white text-black p-1 ">
{new Date(post.date).toString().slice(4, 11)}
</code>{' '}
<code class="flex-none text-sm whitespace-normal mr-2 bg-black text-white border p-1 ">
{post.tag}
</code>
<a href={'/' + post.url + '/'}>{post.title}</a>
</li>
為了修復這個問題,我在 code
區塊中添加了 self-start
類別,這在 Tailwind CSS 中應用了 CSS align-self: start;
。