html 紧凑水平树

fslejnso 于 2022-12-02 发布在其他

关注(0)|答案(1)|浏览(143)

我有一个包含嵌套列表（<ul> + <li>）的HTML。我想使用CSS将其显示为一个紧凑的水平树。
This snippet几乎完全满足了我的要求，但我希望树更紧凑--特别是，我希望每个节点的第一个子节点都显示在父节点的右边，而不是稍低一点。
换句话说，我希望连接父节点和第一个子节点的线始终只水平延伸，即（使用上面的代码片段示例）：
我希望树的格式为：

Animals - Birds
      |-- Mammals - Elephants - List item 1
      |                     |-- List item 2
      |                     |-- List item 3

代替

Animals 
      |-- Birds
      |-- Mammals 
      |         |-- Elephants 
      |         |           |-- List item 1
      |         |           |-- List item 2
      |         |           |-- List item 3

我怎样才能做到这一点？我更喜欢纯CSS/SCSS解决方案，没有JavaScript。谢谢！
可执行的程式码片段：
第一次

Html

来源：https://stackoverflow.com/questions/74630720/css-compact-horizontal-tree

1条答案

按热度按时间

km0tfn4u1#

在此期间，我自己找到了一个解决办法：技巧是向.tree ul添加一个负边距，使其向上移动，并向tree ul:before添加相应的正top属性，用于绘制垂直线。
即变化是：

.tree ul {
  margin: -67px 0 0 15em;
}

.tree ul:before {
  top: 67px;
}

请点击此处：
第一次

赞(0）回复(0）举报 2022-12-02

我来回答

html 紧凑水平树

1条答案

相关问题

热门标签

最新问答