Нужен совет по структуре html/css для отступов, многопоточных комментариев

Question

Нужен совет по структуре html/css для отступов, многопоточных комментариев

Я хочу, чтобы в моем приложении был раздел комментариев, который выглядит следующим образом:

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

Я считаю, что это называется резьбовые комментарии. Вы, наверное, видели этот формат на многих сайтах онлайн-дискуссий, таких как reddit.

Что мне интересно, так это как реализовать это в HTML моего приложения?

Какой тип комбинации html/css будет наиболее целесообразным, чтобы разрешить этот тип определяемого приложением отступа?

4

html css threaded-comments

Источник

user143830 23 июл '09 в 16:08

6 ответов

Решение

Наиболее используемая структура - это комбинация

s (элемент списка). Каждый пост будет иметь список комментариев, например:
```
<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;
}
```
Это делает отступ для каждого списка ответов и добавляет небольшую рамку вверху и внизу каждого ответа, фактически показывая пользователю, что этот ответ содержит другой список ответов на этот ответ.

5

Источник

user12930 23 июл '09 в 16:19

Разве встроенные списки не будут работать? Внедренные неупорядоченные списки с выключенным типом списка будут иметь такой эффект. Может быть, я не понимаю ваш вопрос.

то есть.

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

3

Источник

user142410 23 июл '09 в 16:15

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

2

Источник

user135020 23 июл '09 в 16:16

Я взломал что-то подобное вместе для ManagedAssembly.com. Это не идеально, но это может дать вам некоторые идеи.

1

Источник

user1786 23 июл '09 в 16:18

У вас есть ряд вложенных списков с заданным порядком, так что ряд вложенных элементов

0

Источник

user11281 23 июл '09 в 16:18

Другие вопросы по тегам html css threaded-comments

user98038 23 июл '09 в 16:16 2009-07-23 16:16 · Accepted Answer · 2009-07-23 16:16

В вашем 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>с над <ul>/<li> потому что это упрощает вашу реализацию.

Во-первых, если вы используете подход на основе списка, вы должны удалить <li> стиль, который использует большинство браузеров (точка маркера и отступы). Во-вторых, вы, вероятно, также хотите нацелить набор <ul>/<li>специфичные для ваших комментариев, потому что они должны отличаться от других структур списка. Это означает, что даже при "семантическом" подходе вы прибегаете к занятиям. Итак, в конце концов, какое преимущество вы действительно получаете, и стоит ли это дополнительных хлопот?

Мы были немного более осторожны с применением <ul> подобные структуры в наших проектах, и пока мы действительно рады этому. И, видимо, мы не единственные.