수평 방향의 배치

Question

내가 즉 확장 행과 여러 정렬 열이 같은 뭔가 표 트리 뷰 닮은 다소 표시 할

:

을

나는 즉, 목록의 중첩 된 목록으로, 자연을 배치하고 싶습니다 뭔가 같은 :

<ul> 
    <li> 
     <span class="first">usr</span> 
     <span class="second">root</span> 
     <span class="third">drwxr-xr-x</span> 
     <ul> 
      <li> 
       <span class="first">bin</span> 
       <span class="second">root</span> 
       <span class="third">drwxr-xr-x</span> 
       <ul> 
        <li> 
         <span class="first">which → /bin/which</span> 
         <span class="second">root</span> 
         <span class="third">lrwxrwxrwx</span> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

이 width 문제를 해결 한 요소와 같은 느슨하게 테이블 형식의 데이터를 배치하는 것은 일반적이지만 그리고 display: inline-block, 행운의 시작이 서로 다른 중첩 레벨로 인해 잘못 정렬되면 분명히 작동하지 않습니다.

내 현재 시도는 http://jsfiddle.net/2Lqmx9kt/입니다. 알 수 있듯이 모든 열이 정렬되지 않았습니다.

난 단지 2 개 솔루션을 가지고 올 수있는, 모두 상당히 못생긴 :

1. 하는 것은 궁극적으로 중첩 된 DOM 구조를 잃고, 테이블이 모두를 교체합니다.
어떤 똑똑한 CSS 트릭으로, 자바 스크립트없이,

ul > li > span.first { 
    // full width 
} 
ul > li > ul > li > span.first { 
    // remove one level of width 
} 
ul > li > ul > li > ul > li > span { 
    // remove two levels of width 
} 

DOM의 큰 변화없이 배치 할 수있는 좋은 방법이 있나요

같은 추악한 트릭에 의존?

Answer 1

당신은 중첩 된 요소 '두 번째 스팬에 부정적인 여백이 작업을 수행 할 수 있지만, http://jsfiddle.net/2Lqmx9kt/1/

궁금 해요 :

ul ul li .second { 
    margin-left: -2.5em; 
} 

ul ul ul li .second { 
    margin-left: -5em; 
} 

너무 솔루션을 표현하기 위해 당신의 바이올린을 편집. Telerik Kendo UI의 TreeList과 같은 jQuery/Javascript 데이터 처리를 통해 이렇게하는 많은 솔루션이있는 이유는 무엇입니까? 왜 HTML 네 스팅이 필요한가?