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

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

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

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

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

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

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

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

6 个解决方案

#1

In your HTML:

在您的HTML中:

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

And in your CSS:

在你的CSS中:

.comment { margin-left: 50px; }

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.

这种方法非常灵活和便携。您也可以使用

而不是
(我猜这可能是赞成和反对看到线程注释在语义上等同于无序列表)。如果你需要另外的CSS样式,内部注释也可以包装在另一个
中。

而不是(我猜这可能是赞成和反对看到线程注释在语义上等同于无序列表)。如果你需要另外的CSS样式,内部注释也可以包装在另一个中。

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

更新:我(稍微)更喜欢

s而不是

,因为它简化了您的实施。

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?

首先,如果使用基于列表的方法,则必须剥离大多数浏览器使用的默认

样式(项目符号和填充)。其次,您可能还希望定位特定于线程注释的

集合,因为它们应该与其他列表结构不同。这意味着即使使用“语义”方法,您也可以使用类。所以最后,你真正获得了什么优势,是否值得额外的麻烦?

样式(项目符号和填充)。其次,您可能还希望定位特定于线程注释的/集合,因为它们应该与其他列表结构不同。这意味着即使使用“语义”方法,您也可以使用类。所以最后,你真正获得了什么优势,是否值得额外的麻烦?

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.

我们在项目中应用这样的

#2

The most used structure is a combination of <ul>s (unordered list) and <li>s (list item). Each post would have a list of comments, for example:

最常用的结构是

(列表项)的组合。每个帖子都有一个评论列表,例如:

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

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

Then, expanding that idea, each response may have a list of responses as well. These go inside the <li> item.

然后,扩展这个想法,每个响应也可能有一个响应列表。这些进入

项目。

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

This approach is fairly lightweight code-wise, and is semantically (the tags used mean the right thing) most appropriate.

这种方法在代码方面相当轻量级,并且在语义上(使用的标签意味着正确的东西)最合适。

To add some css onto that to make it visually appealing, you can do something like this:

要在其上添加一些css以使其具有视觉吸引力,您可以执行以下操作:

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

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

This indents each response list, and adds a small border onto the top and bottom of each response, effectively showing the user that this response contains another list of responses to this response.

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

#3

Wouldn't embedded lists work? Embedded un-ordered lists with list-style-type turned off would do that effect. Maybe I'm not understanding your question.

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

ie.

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

#4

<ul> and <li> tags

标签

Example:

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

#5

I hacked something like that together for ManagedAssembly.com. It's not perfect, but it might give you some ideas.

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

#6

What you have is a series of nested lists with a given order so a series of nested <OL> elements would make most sense. You have give OL a left margin so that each level of nesting appears more indented than its parent.

你拥有的是一系列具有给定顺序的嵌套列表,因此一系列嵌套的

#1