需要有关html / css结构的建议以获取缩进的线程注释 [英] Need advice on html/css structure for indented, threaded comments

问题描述

我想在我的应用中添加一个类似于以下内容的评论部分：

I want to have a comments section in my app that looks like this:

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

我相信这被称为主题注释。您可能已经在许多在线讨论站点（例如 reddit ）上看到了这种格式。

I believe it's called threaded comments. You've probably seen this format on many online discussion sites such as reddit.

我想知道如何在应用的HTML中实现它？

What I'm wondering is how to implement this in the HTML of my app?

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

What type of html/css combination would make the most sense to allow this type of application-determined indenting?

推荐答案

在您的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> 中。

This approach is very flexible and portable. You could also use <ul>/<li> instead of <div> (I guess it's possible to argue both in favour and against seeing threaded comments as semantically equivalent to unordered lists). The inner comment can also be wrapped in another <div> if you require it for additionaly CSS styling.

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

Update: I (slightly) prefer <div>s over <ul>/<li> because it simplifies your implementation.

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

Firstly, if you go with the list-based approach, you have to strip the default <li> style that most browsers use (a bullet point and padding). Secondly, you will probably also want to target the set of <ul>/<li>s that are specific to your threaded comments, because they should look different from other list structures. This means that even with the "semantic" approach, you have resort to classes. So in the end, what advantage do you really get, and is it worth the extra hassle?

我们在申请&ul; 结构在我们的项目中，到目前为止，我们对此非常满意。显然，我们不是只有一个。

We've been a little more careful with applying <ul> structures like this in our projects, and so far we're really happy about it. And apparently we're not the only one.

这篇关于需要有关html / css结构的建议以获取缩进的线程注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！