以类似树的行式显示html列表

Question

我有一个清单

<ul>
 <li> first article </li>
 <li> second article</li>
 <ul>
    <li> replies to second</li>
    <li> different reply to second</li>
 </ul>
 <li> third article</li>
 <ul>
    <li> reply to third</li>
    <ul>
        <li> reply to the reply</li>
    </ul>
 </ul>
</ul>

会产生类似

的东西

• 第一篇文章
• 第二篇文章
  • 回复第二个
  • 对第二个
  的不同回复
• 第三篇文章
  • 回复第三个
  • reply3
  • reply3
    • 回复回复

我想要实现的目标基本上是让每一个内在的水平成为它自己的行：

 [first article]
 [second article]
 [rep2]   [difrep2]
 [third article]
 [reply3] [reply3] [reply3]
 [^3reply to the reply]

问题是：当我在列表元素周围放置一个框时，该框包含父元素和所有后代/内部元素。我希望在列表元素周围有一个方框，我希望这些孩子出现在一个新的＆＃34;行＆＃34;

有没有办法去踢＃34;内部列表元素来自其父级的css框，以便它们出现在新的＆＃34;行＆＃34; ？

https://jsfiddle.net/qjf6tsf8/1/

^更新：请查看这个小提琴。

小提琴＆＃34;又一个孩子＆＃34;有孩子的元素，我想把它们放在下面＆＃34>的新行中;还有另一个孩子＆＃34;而不是递归地装箱。

供参考：https://jsfiddle.net/qjf6tsf8/（js小提示显示只有li和ul元素的树结构，然后上面的链接我将它们更改为div）

Answer 1

首先，根据W3C HTML Validator，任何<ul>都不能成为<ul>的直接子女。

所以这个结构

<ul>
  <li> first article </li>
  <li> second article</li>
  <ul>
    <li> replies to second</li>
    <li> different reply to second</li>
  </ul>
...

实际应该是

<ul>
  <li> first article </li>
  <li> second article
    <ul>
      <li> replies to second</li>
      <li> different reply to second</li>
    </ul>
  </li>
...

这实际上使您的问题难以解决。 请参阅https://jsfiddle.net/tae2e7ea/。

重要的部分如下。使用display: block将孩子<ul>放在自己的行上，然后display: inline-block放置<li>孩子。

/* <ul> that are children of <li> should be on their own line */
li > ul {
  display: block;
}

/* And the children of those <ul> should be all on one line */
li > ul > li {
  display: inline-block;
}

编辑以获取更多信息：请参阅小提琴，了解您可能需要在<li>（例如vertical-align: center）或<ul>（例如padding-left: 0）<上设置的其他款式< / p>

在提问者澄清之后进行编辑：由于需要100％的宽度并且使用JavaScript（AngularJS）处理此控件，我建议按树中的级别进行组织，而不是维护您开始使用的树状结构。有关该更新，请参阅this Fiddle。然后可以使用JavaScript来显示/隐藏必要的级别。或者更确切地说，AngularJS应该仅用于呈现＆＃34;选择＆＃34;的列表。水平。

Answer 2

我认为这会有用

<tr>
  <td class="label" style="white-space:nowrap">Nmae:</td>
  <td>&nbsp;</td>
  <td colspan="2" class="bodyText">male</td>
  <td colspan="2" class="label">Age:</td>
  <td class="bodyText" width="1%">&nbsp;</td>
  <td colspan="2" class="bodyText">44 years</td>  <--------------
</tr>

Answer 3

我认为您还没有决定正确显示项目。因为你已经以不同于所有级别的方式考虑不同的级别。为清楚起见，请注意项目replies to second。如果它有一些孩子怎么办？！您可以为要在同一行中显示的每个项目添加类名称 .same-row ，并为您的页面添加简化样式：

.same-row{
    display: inline;
}