需要对HTML / CSS结构缩进螺纹评论意见(Need advice on html/css st

我想在我的应用程序评论部分，看起来像这样：

response1
 response1a
 response1b
  response1b1
response2
 response2a
 response2b
 response2c
  response2c1
   response2c1a
    response2c1a1
     response2c1a1
      response2c1a1a
       response2c1a1a1

我相信，这就是所谓的螺纹评论。你可能见过很多网上讨论等网站reddit的这种格式。

我想知道的是如何在我的应用程序的HTML实现这一点？

什么类型的HTML / CSS的组合将最有意义，让这种类型的应用，确定缩进的？

Answer 1:

在你的HTML：

<div class="comment">
  Response1
  <div class="comment">
    Response1a
    <div class="comment">
      Response1a1
    </div>
  </div>
  <div class="comment">
    Response1b
  </div>
</div>

而在你的CSS：

.comment { margin-left: 50px; }

这种方式非常灵活，便于携带。你也可以使用<ul>/<li>代替<div>我想这可能都赞成和反对看到螺纹评论为语义上等效于无序列表争论）。内部意见还可以包裹在其他<div>如果你需要它additionaly CSS样式。

更新：我（略）喜欢<div>结束了<ul>/<li>因为它简化了您的实现。

首先，如果你使用基于列表的方法去，你必须去除默认<li>大多数浏览器使用样式（子弹点和填充）。其次，你可能也需要为目标的一系列<ul>/<li> S中的特定于螺纹的意见，因为他们应该从另一个列表结构不同。这意味着，即使与“语义”的方式，你必须诉诸类。所以，最后，你真的得到什么好处了，是不是值得额外的麻烦？

我们已经多了几分小心将<ul>我们的项目结构，这样，到目前为止，我们真的很高兴。而且很显然，我们不是唯一的一个。

Answer 2:

最常用的结构是<UL> S（无序列表）的组合和<li> S（列表项）。每个职位将有评论的列表，例如：

<div id="post">
    ... (post content here) ...

    <ul class="responses">
        <li>response1</li>
        <li>response2</li>
    </ul>
</div>

然后，扩大这个想法，每个响应可能有反应的名单。这些走在<LI>项内。

<div id="post">
    ... (post content here) ...

    <ul class="responses">
        <li>
            response1
            <ul class="responses">
                <li>response1a</li>
                <li>response1b</li>
            </ul>
        </li>
        <li>response2</li>
    </ul>
</div>

这种做法是相当轻便的代码，明智的，而且是语义上（使用的标签是指正确的事）最为合适。

要添加一些CSS上，要使其具有视觉吸引力，你可以这样做：

ul.responses {
    padding-left: 4em;
}

ul.responses li {
    border-width: 2px 0;
    border-style: solid;
    border-color: #ccc;
}

这会缩进每个响应清单，并增加了一个小的边框到每个响应的顶部和底部，有效地显示出这个响应包含的这种反应反应的另一个列表中的用户。

Answer 3:

不会嵌入列表的工作？用列表样式类型的嵌入式非有序列表关闭会做这种效果。也许我不理解你的问题。

即。

<ul>
<li>response1
 <ul>
 <li>response1a</li>
 <li>response1b
  <ul>
   <li>response1b1</li>
  </ul>
 </li>
</li>
</ul>

Answer 4:

<ul>和<li>标签

例：

<html>
<head>

</head>
<body>
    <ul>
        <li>
            comment
            <ul>
                <li>I comment you
                    <ul>
                        <li>oh, and I comment you!</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            another one
            <ul>
                <li>comment about your</li>
                <li>well, another about you</li>
            </ul>
        </li>
    </ul>
</body>
</html>