分层缩进

Question

Not sure of the best way to describe it but a picture should work. I have data structured as a tree and I'd like to display it with various levels of indentation.

[1                        ]
    [1a                   ]
        [1ai              ]
    [1b                   ]
[2                        ]
[3                        ]
    [3a                   ]

etc

The key being indenting the left and lining up on the right.

Programatically increasing the padding-left of each element works for the first half, but might not be the correct approach.

I'm using a recursive angular component, though I didn't mention angular originally b/ci don't think its necessarily relevant to the solution.

ts

export class HierarchicalJobNodeComponent{

  @Input() job: JobHierarchical;

  @Input() depth: number;


  pxDepth(): string {
    return this.depth + "px";
  }

  style(): Object {
    return  { 'margin-left': this.depth + "px", 'width':'100%' };
  }
}

html

<div class="node container" [ngStyle]="style()">
  <div class="row">
    <div class="col-sm-3">{{job.job_JobId}}</div>
    <div class="col-sm-1">{{job.job_Status}}</div>
    <div class="col-sm-8">{{job.jobDefinition_SearchName}}</div>
  </div>
  <div class="child row">
    <div *ngFor="let child of job.childJobs">
      <hjobnode [depth]="depth+20" [job]="child"></hjobnode>
    </div>
  </div>
</div>

css

  style(): Object {
    return  { 'padding-left': this.depth + "px", 'width':'100%' };
  }

Answer 1

Your approach using padding was the right way to go. The easiest would be to nest those items within one another, so you don't need to think about the depth.

As Chris W. pointed out, this can be easily represented as a list, using ul (or ol ) and li s.

 ul, li { margin: 0; padding: 0; list-style: none; } li>ul { padding-left: 20px; }

 <ul> <li>Item 1</li> <li>Item 2</li> <li> <ul> <li>Item 2.1</li> <li> <ul> <li>Item 2.1.1</li> </ul> </li> </ul> </li> <li> Item 3 <!-- you can even nest the ul directly inside an item !--> <ul> <li>Item 3.1</li> </ul> </li> </ul>

Hope that helped