Single Fighter Single Fighter - 12 days ago 5
CSS Question

How to make horizontal ordered list for multiple-choice questions?

I want to make a site for multiple-choice examination. The options must be in horizontal to save more space.

Minimal Working Example



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


Output



enter image description here

Desired Output



enter image description here

Question



How to make horizontal ordered list for multiple-choice questions?

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

Add above code to your inline style and be sure to learn more about flexbox for layout.