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>（我猜这可能会支持并反对看到线程注释在语义上等同于无序列表）。如果您需要另外的CSS样式，内部注释也可以包含在另一个<div>中。

更新：我（略）更喜欢<div>而不是<ul>/<li>，因为它简化了您的实施。

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

我们在项目中应用<ul>这样的结构时要小心一点，到目前为止我们对此感到非常高兴。显然我们不是only one。

Answer 2

最常用的结构是＆lt; ul＆gt; s（无序列表）和＆lt; li＆gt; s（列表项）的组合。每个帖子都有一个评论列表，例如：

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

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

然后，扩展这个想法，每个响应也可能有一个响应列表。这些进入＆lt; li＆gt;项目

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

Answer 5

I hacked something like that一起用于ManagedAssembly.com。它并不完美，但它可能会给你一些想法。

Answer 6

你所拥有的是一系列具有给定顺序的嵌套列表，因此一系列嵌套的＆lt; OL＆gt;元素最有意义。您已为OL提供左边距，以便每个嵌套级别比其父级更加缩进。

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

6 个答案: