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
Desired Output
Question
How to make horizontal ordered list for multiple-choice questions?
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.
Related
I am trying to create 1 search menu. With the search history that will appear when I click input search box
When I use class:focus ~ .class2, they work ? Please show me how we work
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.header__search-input:focus .header__search-input-history {
display: block;
}
.header__search-input-history {
display: none;
}
</style>
</head>
<body>
<div class="header__search-input-wrap">
<input type="text" class="header__search-input" placeholder="Search">
<div class="header__search-input-history">
<h3 class="header__search-input-history-title">History Search</h3>
<ul class="header__search-input-history-list">
<li class="header__search-input-history-item">
<a class="header__search-input-history-link" href="">History Item</a>
</li>
<li class="header__search-input-history-item">
<a class="header__search-input-history-link" href="">History Item</a> </li>
</ul>
</div>
</div>
</body>
</html>
Add the following css. This makes use of the + sibling selector
.header__search-input-history{
display: none;
}
.header__search-input:focus + .header__search-input-history
{
display: block;
}
Example here: https://codepen.io/jriches/pen/QWveZqW
Is there a way to apply dir tags to <li> elements and not mess up the list indicators? Intuitively, they should all be at the same side and RTL <li> elements in an otherwide LTR document should either align to the left if it's only a single underfull line, or else from the right. Why do the reversed direction indicators end up so far in the margin anyway?
ul {
max-width: 15em;
margin: auto;
}
<!DOCTYPE HTML>
<html>
<body>
<ul dir="ltr" lang="en">
<li>English</li>
<li dir="rtl" lang="ar">العربية</li>
<li>English</li>
</ul>
<ul dir="rtl" lang="ar">
<li>العربية</li>
<li dir="ltr" lang="en">English</li>
<li>العربية</li>
</ul>
</body>
</html>
This code works perfect. You can do it just by applying css:
<!DOCTYPE HTML>
<html>
<style type="text/css">
ul {
direction: rtl;
max-width: 15em;
margin: auto;
}
.ltr{
direction : ltr;
}
.rtl{
direction : rtl;
}
</style>
<body>
<ul class="ltr" lang="en">
<li>English</li>
<li lang="ar">العربية</li>
<li>English</li>
</ul>
<ul class="rtl" lang="ar">
<li>العربية</li>
<li lang="en">English</li>
<li>العربية</li>
</ul>
</body>
</html>
"Why do the reversed direction indicators end up so far in the margin anyway?"
Because you have applied a max-width:15em to the ul. So the child list items will take full width of the parent and ended up in this way.
"Is there a way to apply dir tags to <li> elements and not mess up the list indicators?"
Workaround 1:
If you are not bothered about the inconsistent alignment of list indicators and need them to follow the direction, make the ul an inline element. without giving a specific width.
body {
margin: 50px;
}
ul {
display: inline-block;
max-width: 15em;
margin: auto;
}
<!DOCTYPE HTML>
<html>
<body>
<ul dir="ltr" lang="en">
<li>English</li>
<li dir="rtl" lang="ar">العربية</li>
<li>English</li>
</ul>
<br><br><br><br>
<ul dir="rtl" lang="ar">
<li>العربية</li>
<li dir="ltr" lang="en">English</li>
<li>العربية</li>
</ul>
</body>
</html>
Workaround 2:
Use list-style-position: inside property in ul. This property align the bullets with the text.
ul {
max-width: 15em;
margin: auto;
list-style-position: inside;
}
<!DOCTYPE HTML>
<html>
<body>
<ul dir="ltr" lang="en">
<li>English</li>
<li dir="rtl" lang="ar">العربية</li>
<li>English</li>
</ul>
<br><br><br><br>
<ul dir="rtl" lang="ar">
<li>العربية</li>
<li dir="ltr" lang="en">English</li>
<li>العربية</li>
</ul>
</body>
</html>
How do I stop the right menu dropdown child elements from going off the page? I know it is simple but don't know the CSS to change to get it to work. Any help is appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your page title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<style>
ul{background-color: #4CAF50; width: 100%}
</style>
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
Contact
<ul class="pure-menu-children">
<li class="pure-menu-item">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover" style="float:right">
Test
<ul class="pure-menu-children">
<li class="pure-menu-item"">Email</li>
<li class="pure-menu-item">Twitter</li>
<li class="pure-menu-item">Tumblr Blog</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I want to have them so the start at the right hand side of the page but not go off.
thanks
With some tweaking and adding in your CSS, you can achieve this. See this JSFiddle, I also cleaned your code.
Add the class .right-menu to the most right menu to get this working.
.pure-menu-horizontal .right-menu .pure-menu-children {
left: auto; /* Position from right, not from left */
right: 0; /* Position from right, not from left */
}
Update
I used display: flex; to address the problem that Firefox's having to properly show the menu you wanted.
This is what you need to add:
.pure-menu-horizontal .pure-menu-list.pure-menu-list {
display: flex;
}
.pure-menu-horizontal .right-menu {
margin-left: auto;
}
See my updated JSFiddle. Read more about the handy flexbox property at Mozilla Developer Network.
For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.
Here is my style.css:
#media only screen and (min-width : 250px) and (max-width : 780px)
{
#pageHeader{
border:none;
background-color:"background-color:#F5F5DC";
}
#pageHeader nav {
height:300px;
width:100%;
}
#pageHeader nav ul {
padding-left:0;
width:100%;
}
#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}
#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
}
Here is my html:
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<div id="pageHeader" style="background-color:#F5F5DC">
<img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/>
<br />
<br />
<nav>
<ul>
<li >Home</li>
<li style="margin-left:25px">All Products</li>
<li style="margin-left:25px">Blog Using Ruby</li>
<li style="margin-left:25px">User Javascript Page</li>
<li style="margin-left:25px">Submit Concerns using Perl</li>
<li class="active" style="margin-left:25px">About Us using HTML5</li>
<li style="margin-left:25px">Asp Help Pages</li>
<li style="margin-left:25px;"><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
</nav>
</div>
</div>
<h1 align="center">About Us</h1> </br> </br>
<div align="center" id="pageBody">
<table width="100%" border="0" cellpadding="6">
<tbody>
<tr>
<td> Code omitted </td>
</tr>
</tbody>
</table>
<div id="pageFooter">
Copyright |Admin Log In
</div>
</div>
</body>
</html>
Look that you have an extra tag when you close your
<div id="pageHeader" style="background-color:#F5F5DC">
If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!
Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
(See http://css-tricks.com/snippets/css/clear-fix/)
The list will take the height of its contents.
You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).
The unordered list will need to look something like this-
<ul class="group">
<li>Home</li>
<li>All Products</li>
<li>Blog Using Ruby</li>
<li>User Javascript Page</li>
<li>Submit Concerns using Perl</li>
<li class="active">About Us using HTML5</li>
<li>Asp Help Pages</li>
<li><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.
I'm not sure if this is possible, but I'm attempting to set up an ordered list with checkboxes in front of each list item, something like this:
I would like this to have a checkbox to the left of the item number and wrap to the first word in the sentence, not to the item number.
Same deal as item number 1, want a checkbox to the left of the item number and wrap to first word in sentence.
I've figured out the indenting stuff using this question, but haven't been able to get the checkboxes to show up on the same line as the <li>. Is there any way to do this?
Here's a jsFiddle I've been messing with.
http://jsfiddle.net/9v97V/2/
You can do something like this. You put the input inside the list item, then absolute position it so it appears before the list item.
Most relevant CSS:
li input
{
position: absolute;
margin-left: -40px;
margin-top: 5px;
}
I've made a new jsFiddle based on yours: http://jsfiddle.net/3VESY/1/
Basicly I've put the text in a span (could also be a div) and a float on the input. The span has a padding-left to create the indent.
Hope that's what you needed?
ol {
list-style-type:decimal;
margin-left:20px;
}
ol li span {
display:block;
padding-left:30px;
}
input
{
float:left;
}
edit updated fiddle: http://jsfiddle.net/3VESY/1/ to add numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form{
border: 2px solid #f1f1f1;
text-align: left;
}
ol{
margin-left:40%;
font-weight:bold;
}
</style>
</head>
<body>
<div class="container">
<form action="/action.php">
<ol type="A" style="color: red" >
<li><p >CSE</p></li>
<ol type="i" style="margin-left:-13%; color: blue">
<li>
<input type="checkbox" id="cb1" name="op1">
<label for="cb1"> Artificial Intelligence</label>
</li><br>
<li>
<input type="checkbox" id="cb2" name="op2">
<label for="cb2">Machine Learning</label>
</li>
</ol><br>
<li><p>ECE</p></li>
<ol type="A" style="margin-left:-13%; color: blue">
<li>
<input type="checkbox" id="cb3" name="op3">
<label for="cb3">Embedded Systems</label>
</li><br>
<li>
<input type="checkbox" id="cb4" name="op4">
<label for="cb4">IOT</label>
</li><br>
</ol>
</ol>
</form>
</div>
</body>
</html>