Hey Nikki, great question—adding clear horizontal/vertical connectors to nested folder structures makes hierarchy way easier to parse, and I’ve worked through similar challenges a few times. Let’s walk through practical solutions based on what platform or tech stack you’re using:

1. Web-Based Folder Trees (HTML/CSS/JS) #

If you’re building this for a website or web app, a pure CSS approach with pseudo-elements is lightweight and effective. Here’s a working example:

HTML Structure #

Start with nested <ul>/<li> elements to represent your folder hierarchy:

<div class="folder-tree">
  <ul>
    <li>
      <span class="folder">Root Folder</span>
      <ul>
        <li><span class="folder">Subfolder 1</span></li>
        <li>
          <span class="folder">Subfolder 2</span>
          <ul>
            <li><span class="file">Document.txt</span></li>
            <li><span class="file">Image.jpg</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS for Connectors #

Use ::before and ::after pseudo-elements to draw the horizontal/vertical lines. This avoids extra DOM elements:

.folder-tree ul {
  list-style: none;
  padding-left: 24px;
  position: relative;
}

/* Vertical line for nested groups */
.folder-tree ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #888;
}

.folder-tree li {
  position: relative;
  margin: 8px 0;
  line-height: 20px;
}

/* Horizontal line connecting parent to child */
.folder-tree li::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -20px;
  width: 20px;
  height: 1px;
  background-color: #888;
}

/* Fix for last child: stop vertical line at the current item */
.folder-tree li:last-child::before {
  height: 10px; /* Match line height half */
}

/* Add folder/file icons for clarity */
.folder, .file {
  padding-left: 22px;
  background-repeat: no-repeat;
  background-position: left center;
  cursor: pointer;
}

.folder {
  background-image: url('folder-icon.svg'); /* Replace with your icon */
}

.file {
  background-image: url('file-icon.svg'); /* Replace with your icon */
}

Add Expand/Collapse (Optional) #

If you need interactive folding, add a bit of JavaScript to toggle visibility:

document.querySelectorAll('.folder').forEach(folder => {
  folder.addEventListener('click', () => {
    const subTree = folder.nextElementSibling;
    if (subTree?.tagName === 'UL') {
      subTree.classList.toggle('hidden');
      folder.classList.toggle('expanded');
    }
  });
});

And update the CSS to handle hidden states:

.folder-tree ul.hidden {
  display: none;
}

.folder.expanded {
  background-image: url('folder-open-icon.svg'); /* Swap to open folder icon */
}

2. Desktop Applications #

If you’re building a desktop app, the approach depends on your framework:

• Electron: Use the same HTML/CSS/JS approach above—Electron wraps web tech, so it works seamlessly.
• Python (Tkinter): Use a Canvas widget to manually draw lines. You’ll need to listen to tree expansion events and redraw connectors based on item positions.
• Qt (PyQt/QT C++): Customize a QTreeView with a delegate that paints lines between parent/child items using the paint() method.

3. Static Documents (Markdown, Docs) #

For static docs, use Mermaid’s tree diagram syntax—most platforms (GitHub, Obsidian, Confluence) support this:

graph TD
  Root[Root Folder] --> Sub1[Subfolder 1]
  Root --> Sub2[Subfolder 2]
  Sub2 --> Doc[Document.txt]
  Sub2 --> Img[Image.jpg]

This renders a clean, connected hierarchy without needing code.

Pick the approach that fits your use case best—let me know if you need help adapting any of these to your specific setup!

内容的提问来源于stack exchange，提问作者Nikki