主页 / coding / 问题 / 76993944
Accepted
WoJ
Asked: 2023-08-28 22:57:08 +0800 CST

如何强制div的内容在一行上？

  • 772

我有一个使用 Tailwind CSS 设计的 Vite/Vue 应用程序。我不明白为什么几个自动生成的内容<div>被包装而不是在一行上。

我尝试从头开始重现这一点，但无论我尝试什么，其行为都符合预期。

最后复制生成的HTML，问题重现。代码如下，也可以在Tailwind Play上找到。

<div class="flex flex-row items-start gap-5">
  <!--v-if-->
  <div data-v-c5bff582="" class="">
    <!-- important events within 8 days -->
    <div data-v-c5bff582="" class="flex flex-auto flex-row gap-3">
      <div data-v-c5bff582="" class="w-32 rounded-3xl bg-green-200 px-5 py-1 text-center text-2xl text-gray-400">test later 1</div>
      <div data-v-c5bff582="" class="w-32 rounded-3xl bg-green-200 px-5 py-1 text-center text-2xl text-gray-400">test 2 later</div>
    </div>
  </div>
  <button class="self-end rounded-md bg-slate-500 px-5 py-2 text-4xl text-white">dump store</button>
</div>

我的问题是“稍后测试1”和“稍后测试2”。为什么它们不排在一行而是包裹在 中<div>？

在此输入图像描述

我尝试了各种类的组合（坦率地说，当我阅读 Tailwind CSS 文档时，我尝试了一些我能想到的任何组合）但没有成功（不过我学到了很多 Tailwind CSS）

css

1 个回答

  1. Best Answer

    该类w-32在元素上设置固定宽度（在本例中为 8 rems）；内容需要比这更多的空间，因此换行到下一行。

    如果希望按钮都是统一的固定尺寸，就选择较大的固定宽度；否则，您可以删除该类w-*并让元素找到其自然大小。

    • 2

相关问题