Stil eine Kaskade Liste in Tabelle

Question

nur gefragt, ob es einen Weg gibt, eine Kaskade Liste wie folgt stylen:

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

in eine Tabelle wie diese

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

wobei jede Zeile eine horizontale Liste mit der gleichen Breite

ich habe dies zu erreichen experimentiert, kann aber nur so nah wie diese

erhalten

Ich kann nicht jede Zelle die gleiche Breite machen. Hier ist meine 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; 
} 

und hier ist meine Probe 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> 

Alle Ideen werden sehr geschätzt.

Ich habe die Lösung gefunden, aber vorher möchte ich mich für die Antwort in diesem Thread bedanken. Die Lösung ist wie folgt:

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

und die html wie folgt aussieht

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

Sie dies versuchen?

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>