需要有关缩进的线程注释的html/css结构的建议

Question

我希望在我的应用中有一个评论部分,如下所示:

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>如果您需要另外的CSS样式,内部注释也可以包装在另一个注释中.

更新:我(稍微)更喜欢<div>s over,<ul>/<li>因为它简化了您的实现.

首先,如果使用基于列表的方法,则必须删除<li>大多数浏览器使用的默认样式(项目符号和填充).其次,您可能还希望定位特定于线程注释的<ul>/<li>s 集合,因为它们应该与其他列表结构看起来不同.这意味着即使使用"语义"方法,您也可以使用类.所以最后,你真正获得了什么优势,是否值得额外的麻烦？

我们<ul>在项目中应用这样的结构时要小心一点,到目前为止我们对此非常满意.显然我们不是唯一的一个.

Answer 2

最常用的结构是<ul> s(无序列表)和<li>(列表项)的组合.每个帖子都有一个评论列表,例如:

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

这会缩进每个响应列表,并在每个响应的顶部和底部添加一个小边框,有效地向用户显示此响应包含此响应的另一个响应列表.