新建Next.js应用出现莫名行元素？求问原因及是否需担忧

• 先搞清楚这些连续行元素的来源：

  • 大概率是Next.js默认全局样式的残留，或者浏览器自带的默认样式（比如<ul>/<li>的默认列表标记、缩进，<body>的默认边距）
  • 也可能是你添加导航栏时，HTML结构没配合样式重置导致的（比如用了列表标签但没清除默认样式）

• 快速修复方案：

  1. 打开globals.css，添加基础样式重置代码，覆盖默认样式：

     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     ul, ol {
       list-style: none;
     }
     

  2. 按下F12打开浏览器开发者工具，选中这些行元素，在Elements面板查看DOM结构、Styles面板排查样式来源，精准定位问题
  3. 检查导航栏的代码，确认标签嵌套正确，没有多余的列表或换行标签

这种问题只是视觉上的小瑕疵，完全不影响项目功能，修复起来非常简单。

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