我正在创建一个模拟文件目录在文件浏览器或IDE（例如Sublime、VSCode等）中的显示方式的显示器

它在每个元素上使用内联，根据需要缩进元素，以形成文件结构。

当您悬停在目录或文件（例如）上时，该目录或文件将以背景色突出显示

整个显示受宽度限制，但它会滚动以容纳较长的名称。

问题

但是，滚动时，突出显示不会扩展到全宽*。我尝试过嵌套s和玩的各种组合，但没有成功。如何完成？

我对

1. 每个项/行都有不同的宽度
2. 每个项/行都有一个自定义设置作为偏移量

我愿意以任何方式对结构进行重构，以使其在视觉上工作。

谢谢！

---

顺晟科技：

可以对每个级别应用宽度计算。这也使您的样式脱离了标记。

我建议使用instead of和将填充添加到跨中。问题是，不覆盖整个，但没有卷轴。没有JavaScript我找不到解决方案。

只需提供给li元素，就可以开始了。它会完全按照你想要的方式工作。您可以使用第n个子选择器，也可以只对所有li元素进行选择，以便每个元素具有相同的行为。

如果您想使用javascript来完成，那么它会稍微容易一些。您需要做的是

body {
  font-size: 16px;
  font-family: monospace;
}

.tree {
  box-sizing: border-box;
  min-width: 200px;
  width: 200px;
  height: 400px;
  margin: 0;
  padding: 20px 0;
  overflow-x: scroll;
  white-space: nowrap;
  background-color: #ebedef;
}

.tree-node {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  height: 18px;
  padding: 6px 0;
  cursor: pointer;
}

.tree-node:hover {
  background-color: #dbdde0;
}

.tree-node span {
  line-height: 18px;
}

.tree-node svg {
  margin-right: 7px;
}

另一种使用css的方式 你必须对不同的元素分开做。例如，具有30px填充的元素可以有一个规则，但在左侧具有60px填充的元素会有轻微的变化

body {
  font-size: 16px;
  font-family: monospace;
}

.tree {
  box-sizing: border-box;
  min-width: 200px;
  width: 200px;
  height: 400px;
  margin: 0;
  padding: 20px 0;
  overflow-x: scroll;
  white-space: nowrap;
  background-color: #ebedef;
}

.tree-node {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  height: 18px;
  padding: 6px 0;
  cursor: pointer;
}

.tree-node:hover {
  background-color: #dbdde0;
}

.tree-node span {
  line-height: 18px;
}

.tree-node svg {
  margin-right: 7px;
}

只需添加到树元素。您可能还需要调整对齐方式: