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

发布于 2024-07-29 03:06:32 字数 415 浏览 5 评论 0原文

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

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

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

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

哪种类型的 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.

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲凉≈ 2024-08-05 03:06:32

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

这种方法非常灵活且可移植。您还可以使用

/

而不是
（我想，赞成和反对将线程注释视为语义上的观点都是可能的）相当于无序列表）。如果您需要额外的 CSS 样式，内部注释也可以包含在另一个
中。

更新：我（稍微）更喜欢

而不是

/

因为它简化了您的实现。

首先，如果您采用基于列表的方法，则必须删除大多数浏览器使用的默认

样式（项目符号点和填充）。其次，您可能还希望将特定于您的线程注释的

/

集作为目标，因为它们看起来应该与其他列表结构。这意味着即使使用“语义”方法，您也必须诉诸类。那么最终，您真正获得了什么优势，是否值得为此付出额外的麻烦？

我们在项目中应用这样的

唯一的一个。

In your 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:

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

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

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.

回复收藏 0 原文

染年凉城似染瑾 2024-08-05 03:06:32

最常用的结构是

（列表项）的组合。每个帖子都会有一个评论列表，例如：

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

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

然后，扩展这个想法，每个回复也可能有一个回复列表。这些位于

内部。物品。

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

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

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:

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.

回复收藏 0 原文

思念满溢 2024-08-05 03:06:32

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

IE。

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

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>

回复收藏 0 原文

柠檬心 2024-08-05 03:06:32

标签

示例：

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

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

回复收藏 0 原文