Need advice on html/css structure for indented, th

2020-07-18 07:28发布

站内问答 / HTML/CSS
761 6 5

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?

6条回答
三岁会撩人
2楼-- · 2020-07-18 07:47

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

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2020-07-18 07:48

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人赞 添加讨论(0) 举报
我想做一个坏孩纸
4楼-- · 2020-07-18 07:54

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人赞 添加讨论(0) 举报
迷人小祖宗
5楼-- · 2020-07-18 07:54

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人赞 添加讨论(0) 举报
再贱就再见
6楼-- · 2020-07-18 07:54

<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人赞 添加讨论(0) 举报
甜甜的少女心
7楼-- · 2020-07-18 07:55

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)