두 개의 열이있는 순서 목록 만들기. OL 태그와 LI 태그 사이에 DIV를 넣을 수 있습니까?

Question

960.gs 프레임 워크를 사용하여 두 개의 열이있는 정렬 된 목록을 만들려고합니다. 각 목록 항목에는 제목과 단락이 들어 있고 번호 매기기는 건너 뜁니다. 맨 위의 행은 1,3이 아닌 1,2를 포함합니다. 내가 작동하게하는 유일한 방법은 OL 요소와 LI 요소 사이에 DIV를 넣는 것입니다. 이것은 기분이 좋지 않습니다. 왜 그런지 확신 할 수는 없지만 그게 틀림 없습니다. 이것을 달성하기위한 올바른 방법은 무엇입니까? 다음 마크 업이 있습니다.

<div class="container_16"> 
<ol> 
    <div class="grid_8"> 
     <li><h2>Heading</h2> 
      <p>Paragraph</p> 
     </li> 
    </div> 
    <div class="grid_8"> 
     <li><h2>Heading</h2> 
      <p>Paragraph</p> 
     </li> 
    </div> 
    <div class="clear"></div> 
    <div class="grid_8"> 
     <li><h2>Heading</h2> 
      <p>Paragraph</p> 
     </li>  
    </div> 
    <div class="grid_8"> 
     <li><h2>Heading</h2> 
      <p>Paragraph</p> 
     </li>  
    </div> 
    <div class="clear"></div> 
</ol> 
</div> 

Answer 1

ol 태그 안에 div 개의 요소를 배치하는 것은 유효하지 않습니다. 만 li 요소가 허용됩니다

는 .. (check the W3C documentation on lists)

이론은

를 사용해야 960.gs 시스템의

ol{width:200px;} 
li{float:left;width:50%;} 

데모 http://jsfiddle.net/gaby/ZKdpf/1/

---

에서 사용하는 것입니다 012 399,369,

및

데모 당신이 언급으로 실제로

업데이트

---

http://jsfiddle.net/gaby/ZKdpf/2/에 ..

ol.container_16 li.grid_8{ 
    display:list-item; 
} 

다시 번호를 표시하도록 CSS에 추가하려면 삭제해야 할 댓글 li 요소의 높이부터 매 2 개 요소, 현대적인 브라우저의

당신이

.benefits li:nth-child(odd) { 
    clear: left; 
} 

을 추가해야하거나 클래스에 그 전원을 켜고 홀수에 추가 할 수 있습니다 .. 동일하지 않습니다 li 번호가 집단.

Answer 2

위의 소스 코드는 wront입니다. 당신은 요소

<li></li> 

제외

<ol></ol> 

사이를 무엇을 배치 할 수 없습니다. 당신은 propably 목록을 스타일링 다른 방법을 찾아야 해.

Answer 3

'잘못 생각하십시오'. 목록에는 목록 항목 만 포함됩니다. 가장 쉬운 방법은 가로로 번호를 매기는 것입니다. LI를 플로팅하는 것입니다.