Question

例如我有这样的结构：

<Ul>
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

这里的内容是动态的，我需要在heading周围添加包装div并跟随内容，就像这样

<div class="wrap">
<div>heading</div>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</div>

Answer 1

不要使用DIV来包裹你的LI，而是考虑为你想要作为标题显示的每个LI添加一个类。

<style>
.heading
{
 font-weight:bold;
}
</style>

<Ul>
<li class="heading">heading</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li class="heading">heading</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

Answer 2

您正在做的是不正确的标记 ul标签只能包含li标签作为直接子标记

<Ul>
<li><div>heading</div></li>//Enclose in an li tag
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li><div>heading</div></li>//Enclose in an li tag
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

甚至

<div>heading</div>
<Ul>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>

编辑：

将其包装在容器中

<div class="wrap">
<div>heading</div>
<Ul>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
<li>dynamic content</li>
</Ul>
</div>

Answer 3

使其成为更多语义嵌套列表

<Ul class="wrap">
  <li>heading
    <Ul>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
      <li>dynamic content</li>
    </Ul>
  </li>
</Ul>

在动态HTML列表内容周围添加Div

3 个答案: