You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

TailwindCSS中<li>元素space-y-2间距异常问题求助

问题原因及解决办法
  • 问题根源:你把space-y-2类错误地加在了每个<li>元素上。Tailwind的space-y-*类是给父容器使用的工具类,它的逻辑是给容器内的子元素(除第一个外)添加margin-top来实现垂直间距。给单个<li>加这个类完全不符合它的设计逻辑,自然会导致第一个<li>没有预期的间距效果。

  • 解决办法:

    1. 移除所有<li>元素上的space-y-2类
    2. 给<li>的父容器<ul>添加space-y-2类

这样父容器会自动为除第一个<li>外的所有子元素添加上方间距,既实现了垂直布局的间距需求,也不会出现第一个元素的异常问题。

内容的提问来源于stack exchange,提问作者Rishi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.27 21:57:02