如何为多项选择题制作横向有序列表？

时间：2016-11-28 17:02:36

标签： html css

我想建立一个多选择考试的网站。选项必须是水平的，以节省更多空间。

最小工作示例

<!DOCTYPE html>
<html>
<head>
    <title>Horizontal Lists</title>
    <meta charset="utf-8" />
    <style>
        li.ans {
            color: red;
        }

        ol.option {
        }

            ol.option > li {
                list-style: lower-alpha;
            }
    </style>
</head>
<body>
    <ol>
        <li>
            What is the capital of Japan?
            <ol class="option">
                <li>New York</li>
                <li>Jakarta</li>
                <li class="ans">Tokyo</li>
                <li>Kuala Lumpur</li>
            </ol>
        </li>
        <li>
            Who was granted a Noble prize for discovering photo electric effect?
            <ol class="option">
                <li>Mike Tyson</li>
                <li>Bill Gates</li>
                <li>Donald Trump</li>
                <li class="ans">Albert Einstein</li>
            </ol>
        </li>
    </ol>
</body>
</html>

输出

期望输出

问题

如何为多项选择题制作横向有序列表？

1 个答案:

答案 0 :(得分：3)

ol.option {
    display: flex;
    justify-content: space-between;
    max-width: 500px;
  }

将以上代码添加到您的内联样式中，并确保了解有关 flexbox 的更多信息，以便进行布局。