4

次のようなコメントセクションをアプリに追加したいと思います。

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

スレッドコメントと呼ばれていると思います。おそらく、 redditなどの多くのオンラインディスカッションサイトでこの形式を見たことがあるでしょう。

私が疑問に思っているのは、これをアプリのHTMLに実装する方法です。

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

4

6 に答える 6

13

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>sよりもsを好みます。<ul>/<li>

まず、リストベースのアプローチを使用する場合は<li>、ほとんどのブラウザが使用するデフォルトのスタイル（箇条書きとパディング）を削除する必要があります。次に、スレッド化されたコメントに固有<ul>/<li>のsのセットもターゲットにする必要があります。これは、他のリスト構造とは異なって見える必要があるためです。これは、「セマンティック」アプローチを使用しても、クラスに頼ることができることを意味します。それで、結局、あなたは実際にどのような利点を得るのですか、そしてそれは余分な手間をかける価値がありますか？

私たちはプロジェクトにこのような構造を適用することにもう少し注意を払ってきましたが、<ul>これまでのところ、私たちはそれについて本当に満足しています。そして、どうやら私たちだけではありません。

于 2009-07-23T16:16:27.127 に答える
5

最もよく使用される構造は、<ul>（順序付けられていないリスト）と<li>（リストアイテム）の組み合わせです。各投稿には、コメントのリストがあります。次に例を示します。

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

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

次に、そのアイデアを拡張すると、各応答に応答のリストも含まれる場合があります。これらは<li>アイテムの中にあります。

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

これにより、各応答リストがインデントされ、各応答の上部と下部に小さな境界線が追加され、この応答にこの応答に対する別の応答リストが含まれていることが効果的に示されます。

于 2009-07-23T16:19:58.977 に答える
3

埋め込まれたリストは機能しませんか？list-style-typeがオフになっている埋め込みの順序付けされていないリストは、その効果を発揮します。多分私はあなたの質問を理解していません。

すなわち。

<ul>
<li>response1
 <ul>
 <li>response1a</li>
 <li>response1b
  <ul>
   <li>response1b1</li>
  </ul>
 </li>
</li>
</ul>
于 2009-07-23T16:15:54.443 に答える
2

<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>
于 2009-07-23T16:16:41.010 に答える
1

ManagedAssembly.comのためにそのようなものを一緒にハッキングしました。それは完璧ではありませんが、それはあなたにいくつかのアイデアを与えるかもしれません。

于 2009-07-23T16:18:12.333 に答える
0

あなたが持っているのは、与えられた順序の一連のネストされたリストであるため、一連のネストされた<OL>要素が最も意味があります。ネストの各レベルがその親よりもインデントされているように見えるように、OLに左マージンを与えました。

于 2009-07-23T16:18:21.833 に答える