4

我想在我的应用程序中有一个如下所示的评论部分：

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

我相信它被称为线程评论。您可能已经在许多在线讨论网站（例如reddit ）上看到过这种格式。

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

哪种类型的 html/css 组合最适合允许这种类型的应用程序确定的缩进？

4

6 回答 6

13

在您的 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 ，<ul>/<li>因为它简化了你的实现。

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

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

于 2009-07-23T16:16:27.127 回答
5

最常用的结构是<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;
}

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

于 2009-07-23T16:19:58.977 回答
3

嵌入式列表不起作用吗？关闭列表样式类型的嵌入式无序列表会产生这种效果。也许我不明白你的问题。

IE。

<ul>
<li>response1
 <ul>
 <li>response1a</li>
 <li>response1b
  <ul>
   <li>response1b1</li>
  </ul>
 </li>
</li>
</ul>
于 2009-07-23T16:15:54.443 回答
2

<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>
于 2009-07-23T16:16:41.010 回答
1

我为 ManagedAssembly.com 一起破解了类似的东西。它并不完美，但它可能会给你一些想法。

于 2009-07-23T16:18:12.333 回答
0

您所拥有的是一系列具有给定顺序的嵌套列表，因此一系列嵌套的 <OL> 元素最有意义。您已经给 OL 一个左边距，以便每个嵌套级别看起来比其父级缩进更多。

于 2009-07-23T16:18:21.833 回答