【问题标题】:Add Div around dynamic html list content围绕动态 html 列表内容添加 Div
【发布时间】:2012-02-27 16:41:30
【问题描述】:

例如我有这样的结构:

<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>

【问题讨论】:

    标签: javascript html css dynamic-content


    【解决方案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>
    

    【讨论】:

      【解决方案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>
      

      【讨论】:

      • 我同意你的观点,无论这里给出的示例是完全动态的......我真的很感激......谢谢
      • 准确发布您想要做的事情。仅仅标记是不够的
      • 如你所说,我已更改如下内容:
        • 标题
        • 动态内容
        • 动态内容
        • 动态内容
        • 标题
        现在我想像上面说的那样包装一个容器
      【解决方案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>
      

      【讨论】:

        猜你喜欢
        • 2020-10-29
        • 2018-07-28
        • 1970-01-01
        • 2019-04-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-02-23
        • 2019-04-22
        相关资源
        最近更新 更多