使用 list-style-position: inside 使 li 内的 div 出现在数字的右侧

Question

这看起来很简单，但我在网上找不到解决方案。 我想让 div 出现在数字的右侧，同时将数字保持在li内。

 ol { list-style-position: inside; } li { border: 1px dashed green; }

 <ol> <li> <div> !!!text text text text text text text text text text text text text text text text text text </div> </li> </ol>

Answer 1

div 标签是块元素，你应该使用 span 元素，它是内联的。

 ol { list-style-position: inside; } li { border: 1px dashed green; }

 <ol> <li> <span> !!!text text text text text text text text text text text text text text text text text text </span> </li> </ol>

如果你真的想使用 div，添加style="display: inline"

 ol { list-style-position: inside; } li { border: 1px dashed green; } div{ display: inline; }

 <ol> <li> <div> !!!text text text text text text text text text text text text text text text text text text </div> </li> </ol>

Answer 2

要在数字后对齐文本，请使用 span 标签，因为它是 html 中的内联容器，否则使用 div 定义显示内联属性以对齐数字后的文本

 <ol> <li> <span> !!!text text text text text text text text text text text text text text text text text text </span> </li> </ol>

Answer 3

您还可以将内部 div 显示设置为内容

display: contents