Question

我希望实现的目标是：

<p class="parent">Paragraph text
  <ul>
    <li>One</li>
    <li>Two</li>
 </ul>
</p>

当我尝试

时

p.parent
  | Paragraph text
  ul
    li One
    li Two

它产生

<p class="parent">Paragraph text</p>
<ul>
  <li>One</li>
  <li>Two</li>
</ul>

有没有办法实现所需的嵌套？

Answer 1

虽然在<ul>元素中嵌套<p>是无效的HTML（所以不能，你不能这样做），你可以使用例如<span>元素来模拟它：

<p>Paragraph text <span>First span</span><span>Second span</span></p>

使用CSS：

p span {
    display: block;
    counter-increment: spanCount;
    position: relative;
}

p span::before {
    content: counter(spanCount);
    margin-right: 0.4em;
    width: 2em;
    text-align: right;
}

JS Fiddle demo

参考文献：

'Generated content, automatic numbering and lists.'

Slim：是否可以在带有文本内容的段落中嵌套UL？

1 个答案: