如何用TailwindCSS让元素分置容器两端并保持垂直对齐？

问题核心是inline-flex的宽度特性导致justify-between无法生效，调整方案如下：

• 把li元素的inline-flex替换成flex
• 给li加上w-full（或根据布局需求设置具体宽度），让容器占据可用的完整宽度
• 保留items-center维持垂直居中，此时justify-between就能实现文本居左、箭头居右的效果

修改后的核心代码示例：

<li class="flex items-center justify-between w-full">
  <span>按钮文本</span>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
  </svg>
</li>

为什么之前的justify-between没效果？因为inline-flex是行内弹性容器，它的宽度只会紧紧包裹内部内容，没有多余空间让justify-between来分配元素的左右位置。改成flex并设置宽度后，容器有了足够的横向空间，justify-between就能正常发挥作用，把内部元素分别推到左右两端。

内容的提问来源于stack exchange，提问作者Joe