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>

将级联列表设置为表格

2 个答案: