display: flex 打破 <li> 元素，其中包含文本和 HTML-Tags，如 <strong> [重复]

Question

我目前遇到了显示问题：在带有文本和 HTML 标记（如 <strong>、<b>、<i>、<u> 等）的 <li> 元素上使用 flex 时。 display: flex 用于将自定义项目符号点定位到文本并隐藏默认项目符号点，并用display: flex 覆盖默认的display: list-item。

li {
  display: flex;
  padding: 5px 0;
}
li:before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  background: #878787;
  margin-right: 10px;
  position: relative;
  top: 7px;
  border-radius: 50%;
}

<ul>
  <li>Lorem ipsum dolor sit <strong>amet eirmod tempor</strong> invidunt</li>
  <li>Lorem ipsum dolor sit <u>amet</u> sed diam nonumy eirmod tempor invidunt</li>
  <li>Lorem ipsum dolor sit amet <i>diam nonumy</i> eirmod tempor invidunt</li>
  <li>Element without any Tags only plain Text - no Error</li>
</ul>

正如您在 sn-p 中看到的那样，HTML-Tag 前后的空格会丢失，即使在文本中的 strong、u 和 i 标记之前仍有空格。

如果您在移动设备上很少使用它，则文本只会在文本中间换行。 HTML-Tag 之前的一些文本只进入第二行，而它之后的一些文本则留在第一行。

到目前为止，我发现的唯一解决方法是将 <p>Tags 放入 <li> 类似元素中

<li><p>Lorem ipsum dolor sit <strong>amet eirmod tempor</strong> invidunt</p></li>

但这对我来说并不是一个真正的选择。 例如，当使用 Wordpress 时，您必须进入文本编辑器内的代码视图，将 <p> 标签放置在 <li> 内。当切换回 Visuell 视图时，<p> 标签会被 Wordpress 删除。

使用&nbsp（由@Simone Rossaini 建议）也会导致文本错误

如何解决这个问题以及为什么 display: flex 甚至首先影响<li> 内的文本？

编辑：为了更好地理解，我为自定义项目符号添加了 li:before

Answer 1

刚刚从li中删除了display: flex，即可解决问题。

默认情况下，li 元素的样式 display: list-item 显示为 bullet 和list-style-type 用于样式li 的外观 （例如：disc、circle、decimal）

如果您不想在 li 之前显示项目符号，请将其设置为 display: inline-block;

Answer 2

您可以使用  创建空间而不使用<p> 标签：

li {
  display: flex;
  padding: 5px 0;
}

<ul>
  <li>Lorem ipsum dolor sit&nbsp;<strong>amet eirmod tempor</strong>&nbsp;invidunt</li>
  <li>Lorem ipsum dolor sit <u>amet</u> sed diam nonumy eirmod tempor invidunt</li>
  <li>Lorem ipsum dolor sit amet <i>diam nonumy</i> eirmod tempor invidunt</li>
  <li>Element without any Tags only plain Text - no Error</li>
</ul>