HTML代码中星号(*)自动换行问题排查求助

问题代码 #

<p>Please fill in the required fields<p style="color: red; font-size: 18px;">*</p></p>

问题原因 #

<p>是块级元素，默认独占一行，且HTML规范禁止<p>标签嵌套使用。浏览器解析时会自动修正错误的嵌套结构，将外层<p>提前闭合，实际渲染的代码结构等同于：

<p>Please fill in the required fields</p>
<p style="color: red; font-size: 18px;">*</p>
<p></p>

两个独立的<p>块级元素自然会分行显示，导致星号出现在下一行。

修复方案 #

要让星号和文字在同一行，可采用以下两种方式：

1. 将星号放在同一个<p>标签内，用<span>设置样式（推荐）：

<p>Please fill in the required fields<span style="color: red; font-size: 18px;">*</span></p>

2. 替换容器类型，使用行内元素承载星号：

<div>Please fill in the required fields<span style="color: red; font-size: 18px;">*</span></div>

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