样式级联列表到表

Question

只是询问是否有一种方法样式级联列表如下：

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

到表像这样

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

，其中每行是一个水平列表用同样宽度

我一直在尝试实现这一目标，但只能得到尽可能接近这个

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

我不能使每个单元格的宽度相同。 这里是我的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; 
} 

，这里是我的样本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> 

任何想法将不胜感激。

我找到了解决方案，但在此之前，我想感谢此线程中的响应。 解决的办法是这样的：

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> 

Answer 1

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


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

你试试这个？

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>