style une liste en cascade dans la table

Question

demande simplement s'il y a un moyen de style une liste en cascade comme ceci:

<ol> 
    <li> 
     <ol> 
      <li>col 1 row 1</li> 
      <li>column 2 row 1</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>column 1 row 2</li> 
      <li>col 2 row 2</li> 
     </ol> 
    </li> 
</ol> 

dans une table comme celui-ci

------------------------------------------------------ 
|col 1 row 1    |column 2 row 1   | 
|column 1 row 2   |col 2 row 2    | 
------------------------------------------------------ 

où chaque ligne est une liste horizontale avec la même largeur

J'ai expérimenté pour y parvenir, mais il ne peut se rapprocher que ce

------------------------------------------------------ 
|col 1 row 1 |column 2 row 1       | 
|column 1 row 2 |col 2 row 2       | 
------------------------------------------------------ 

Je ne peux pas rendre chaque cellule de la même largeur. Voici mon css

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; 
} 

et voici mon exemple html

<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> 

Toutes les idées seront très appréciées.

J'ai trouvé la solution, mais avant je voudrais remercier pour la réponse dans ce fil. La solution est comme ceci:

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; 
} 

et le code HTML ressemble à ceci

<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> 

Answer 1

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


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

vous essayez ceci?

Answer 2

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>