如何让Vite/Vue项目中Tailwind样式的div内容保持单行？

你的问题核心是div默认是块级元素，会独占一行导致自动换行，用以下两种Tailwind类组合就能解决：

• 方案1：给父容器添加Flex布局类
  给包含这些div的父元素加上flex类，子元素会自动在一行排列，还可以搭配items-center让垂直方向对齐，flex-nowrap强制不换行（默认就是nowrap）。示例：

  <div class="flex items-center">
    <div class="...">test later 1</div>
    <div class="...">test 2 later</div>
  </div>
  

• 方案2：给子div添加行内块类
  直接给每个需要同行显示的div加上inline-block类，让块级元素变成行内块特性，既保留宽高设置，又能在一行排列。示例：

  <div class="inline-block ...">test later 1</div>
  <div class="inline-block ...">test 2 later</div>
  

你可以根据自己的布局需求选其中一种，比如需要更灵活的对齐或空间分配，优先用Flex布局；如果只是简单让元素同行，行内块也能快速解决。

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