2009-07-24 6 views
3

로 캐스케이드 목록 그냥 물어 같은 폭스타일 테이블

내가 이것을 달성하기 위해 실험을했습니다,하지만이

,892,639,395 가깝게 얻을 수 있습니다

각 셀의 너비가 동일하지 않습니다. 여기 여기

ol.question_list { 
    list-style: decimal; 
    width: 100%; 
} 

ol.question_list li { 
    clear: both; 
    width: 100%; 
} 

ul.choice_list { 
    list-style: none; 
    padding: 0; 
    margin: 0 auto; 
    width: 100%; 
} 

ul.choice_list li { 
    display: inline; 
    list-style-type: none; 
} 

와 어떤 아이디어가 높게 평가 될 것이다

<ol class="question_list"> 
    <li> 
     <ul class="choice_list"> 
      <li>abc</li> 
      <li>defghi</li> 
     </ul> 
    </li> 
    <li> 
     <ul class="choice_list"> 
      <li>abc12345</li> 
      <li>defghi12345</li> 
     </ul> 
    </li> 
</ol> 

내 샘플 HTML 내 CSS를

입니다.

해결책을 찾았지만이 스레드의 응답에 감사드립니다. 이 솔루션은 다음과 같이이다 :

ol.row_list { 
    list-style: decimal; 
    padding: 0; 
    margin: 0 auto; 
    width: 100%; 
} 

ol.row_list li:after { 
    content: " "; 
    display: block; 
    line-height: 1px; 
    font-size: 1px; 
    clear: both; 
} 

ul.col_list { 
    list-style: none; 
    padding: 0; 
    margin: 0 auto; 
    width: 100%; 
} 

ul.col_list li { 
    display: block; 
    float: left; 
    width: 8%; 
    margin: 0; 
    padding: 0; 
} 

div { 
    display: table; 
} 

와 HTML은 당신이 노력이

<div> 
    <ol class="row_list"> 
     <li> 
      <ul class="col_list"> 
       <li>abc 
       </li> 
       <li>12345 
       </li> 
      </ul> 
     </li> 
     <li> 
      <ul class="col_list"> 
       <li>abc12345 
       </li> 
       <li>1234567890 
       </li> 
      </ul> 
     </li> 
    </ol> 
</div> 
+0

나는 디스플레이를 생각 : 인라인이 당신을 죽이고있다. 그렇지 않으면, "ol li ul li"의 너비를 설정하면됩니다. 아마 두 번째 li의 float도 도움이 될 것입니다. – jrockway

답변

1
.question_list { 
    min-height: 10px; //clear float 
} 


.question_list li { 
    display: block; 
    float: left; 
    width: 50%; 
} 

처럼 보인다?

0

CSS

ol,ul,li{ 
    padding:0; 
    margin:0; 
} 
.question_list { 
    list-style-type:none; 
} 

.choice_list li { 
    float:left; 
    list-style-type:none; 
    width:50%; 
} 

HTML

<ol class="question_list"> 
    <li> 
     <ul class="choice_list"> 
      <li>abc</li> 
      <li>defghi</li> 
      <br style="clear:both;" /> 
     </ul> 
    </li> 
    <li> 
     <ul class="choice_list"> 
      <li>abc12345</li> 
      <li>defghi12345</li> 
      <br style="clear:both;" /> 
     </ul> 
    </li> 
</ol> 
+6


= EWWWWWWWWWWWWWWWWWWWWWWWW – Jason

관련 문제