CSS / HTML: Create an ordered list with a nested list that is left justified, but the text should be square
I have a list of headers, each with a nested list. These lists have bullet point increments and I want everything, including nested lists, to be aligned completely to the left. Then I want to make sure the text is aligned with the rest of the text, not so that when a new line starts, it moves to the left below the markers.
It is much easier to follow the examples below. This is what I have so far:
/* Numbered lists like 1, 1.1, 2.2.1... */
ol {
counter-reset: item;
padding: 0;
margin: 0;
margin-left: 20px !ie7;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li:before {
display: block;
position: relative;
content: counters(item, ".") ".";
}
ol > li {
counter-increment: item;
}
ol li:before {
display: inline-block;
width: 50px;
}
ol ol > li:before {
}
ol li li:before {
width: 70px;
}
ol li li li:before {
width: 90px;
}
ol li li li li:before {
width: 110px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css">
<title>Page Title</title>
</head>
<body>
<ol class="heading">
<li>TITLE ONE</li>
<ol class="contents">
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</span></li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur.</li>
</ol>
</ol>
<li>TITLE TWO</li>
<ol>
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li>TITLE THREE</li>
<ol>
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
<li>text 3 five</li>
<li>text 3 six</li>
</ol>
</ol>
</body>
</html>
As you can see from point 1.1, the text when on a new line comes back and I want to try setting it to match the start of point.
Here's what I was aiming for:
It's tricky and thank you in advance who will come back with some answer.
source to share
Can you add <span>
to the other <li>
? If yes, this will be one way:
/* Numbered lists like 1, 1.1, 2.2.1... */
/* Numbered lists like 1, 1.1, 2.2.1... */
ol {
counter-reset: item;
padding: 0;
margin: 0;
margin-left: 20px !ie7;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li span, li {
display: block;
overflow: hidden;
}
li:before {
display: block;
position: relative;
content: counters(item, ".") ".";
float: left;
}
ol > li {
counter-increment: item;
}
ol li:before {
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS.css">
<title>Page Title</title>
</head>
<body>
<ol class="heading">
<li>TITLE ONE
<ol class="contents">
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris qu</span></li>
<li><span>Lorem ipsum dolor sit amet, conse</span></li>
<li><span>Lorem ipsum dolor sit amet, consectetur a</span></li>
<li><span>Lorem ipsum dolor sit am</span>
<ol>
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis auguesit amet enim uetur.</span></li>
</ol>
</li>
</ol>
</li>
<li>TITLE TWO
<ol>
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
</li>
<li>TITLE THREE
<ol>
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
<li>text 3 five</li>
<li>text 3 six</li>
</ol>
</li>
</ol>
</body>
</html>
source to share
Your html is currently invalid. The only valid immediate children ol
are:
Zero or more li and script-supporting .
http://www.w3.org/TR/html5/grouping-content.html#the-ol-element
Now you have more elements ol
as children of the parent element ol
. They should be inside your elements li
. See below:
<ol>
<li>
<h1>TITLE ONE</h1>
<ol class="contents">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis
augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur
sed orci eget dolor mollis suscipit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur. Morbi in arcu nulla. Curabitur sed orci eget dolor mollis suscipit.</li>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis augue sit amet enim ultrices consectetur.</li>
</ol>
</ol>
</li>
<li>
<h1>TITLE TWO</h1>
<ol>
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
</li>
<li>
<h1>TITLE THREE</h1>
<ol>
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
<li>text 3 five</li>
<li>text 3 six</li>
</ol>
</li>
</ol>
Decision:
The styling is easier now because you can target li > h1
andli > ol
source to share
I have a way that works that works without having to adad all those gaps:
http://jsfiddle.net/qGCUk/1083/
Sorry the css ugliness - I threw it :)
CSS
OL { counter-reset: item; }
LI { display: block; }
LI:before { content: counters(item, ".") " ";
counter-increment: item;
}
li{
position:relative;
}
ol li ol li{
padding-left:10px;
margin-left:10px;
}
ol li ol li::before{
content: counters(item, ".") " ";
counter-increment: item;
position:absolute;
left: -30px;
}
HTML:
<ol>
<li>one</li>
<li>two
<ol>
<li>two.onesjidasjdioasjdiosajdiosa jdioasjdioasjdisaojdoiasjdoisajd oiasjdioasjdiojasidojs aiodjsaiodjsaoidjsaoidjosiadjoisajdiosajdoiasjdioasjdiosajdiosajdiosajiod</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>four</li>
</ol>
source to share