3

次のようなカスケードリストのスタイルを設定する方法があるかどうかを尋ねるだけです。

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

2 に答える 2

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


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

あなたはこれを試しますか？

于 2009-07-24T18:47:09.413 に答える
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>
于 2009-07-24T19:02:20.333 に答える