如何在不更改布局的情况下跳过/处理 Tailwind 网格中的空单元格？ [关闭]

Posted 2023-03-07

【中文标题】如何在不更改布局的情况下跳过/处理 Tailwind 网格中的空单元格？ [关闭]

【英文标题】：How to skip/deal with empty cells in a Tailwind grid without changing the layout? [closed]

【发布时间】：2021-12-04 12:15:39

【问题描述】：

我想创建一个 LABELS 和 INPUT 元素的输入表单，它们在一行中垂直对齐，并带有一些部分标题。

见：https://play.tailwindcss.com/HAYm53a8UF

如何在不向上移动所有其他元素的情况下摆脱第 16 行和第 20 行？一旦_被删除，布局就会改变。似乎空单元格的呈现方式有所不同。

【参考方案1】：

解决方案：

第 16 行：<div class="pt-5 h-12"></div> 第 20 行：<div class="pt-3 h-10">_</div>

---

顺便说一句，它们不是“Tailwind 网格中的单元格”，也没有以不同的方式呈现。包含标签和输入的 div 位于 flex 内。如果您想称它们为“网格单元”，请不要将它们放在 flexbox 中，而是直接将它们作为网格的子元素放置。

【讨论】：

您是如何设计出 h-12 和 h-10 的？我认为您没有使用试错法。

@RobertM.Münch 我确实使用了试错法。那是因为我在代码中没有看到任何规则/模式。