CSS3 멀티 컬럼리스트

CSS3 멀티 컬럼리스트

현재 몇 개의 Wordpress 사이트에서 CSS3 멀티컬럼을 사용하고 있는데, 예외적으로도 수정 방법을 알고 싶은 것은 목록(하위 항목 포함)을 콜럼에 넣으면 목록 구조가 유지되지 않는다는 것입니다.

확실히 하기 위해서, 이것은 HTML 입니다.

<div>
<ul>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul>
   </li>
   <li>
      List-item
      <ul>
         <li>Sub-list-item</li>
         <li>Sub-list-item</li>
      </ul
   </li>
</ul>
</div>

CSS는 다음과 같습니다.

div{
-webkit-column-count:3;   
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;   
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}

그리고 다음과 같은 결과를 얻을 수 있습니다.

Wordpress에서 메뉴를 이렇게 표시할 수 있어 좋습니다.단, 한 가지 곤란한 점은 서브목록 항목이 다음 열에 배치되어 있는 반면 해당 항목의 상위 항목은 이전 열에 배치되어 있다는 것입니다.

이거 고칠 수 있어요?

다른 사람이 말하기 전에, 리스트를 여러 개 만들어 독자적인 컬럼을 만드는 것은 어떨까요?(이 방법은 제가 질문했을 때 제안했던 것입니다) 이것은 동적 워드프레스 메뉴용입니다.메뉴에 몇 개의 항목이 있는지 제어할 수 없습니다.

부모 만들기<li> display: inline-block;이 문제를 '수정'하는 것 같습니다.

여기 데모 http://jsfiddle.net/DczVL/1/가 있습니다.

ul {
    list-style: none;
    margin:0;
    padding:0;
}
ul > li {
    display: inline-block;
    width: 100%;
}
ul > li > ul >li {
    color: red;
}
div {
    -webkit-column-count:3;
    -moz-column-count:3;
    -ms-column-count:3;
    -o-column-count:3;
    column-count:3;
    -webkit-column-gap:15px;
    -moz-column-gap:15px;
    -ms-column-gap:15px;
    -o-column-gap:15px;
    column-gap:15px;
    columns:3;
}

<div>
    <ul>
        <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
        <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
         <li>List-item
            <ul>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
                <li>Sub-list-item</li>
            </ul>
        </li>
    </ul>
</div>

언급URL : https://stackoverflow.com/questions/22536800/css3-multi-column-list