ol numbers underneath li text [closed] - css

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm trying to figure out how to style items in my ol. My goal is for the end result to have the ol horizontal with the numbers under left aligned under the li text.
Example of how end result should look:
Item Item Item Item Item
1 2 3 4 5

Answer 1

Here is one way of realizing this design using pseudo-elements to position a custom counter.
You can start with either an ordered or an unordered list:
<ol class="list">
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
<li>Durian</li>
</ol>
apply the following CSS:
.list {
counter-reset:itemcounter;
margin: 0;
padding: 0;
}
.list li {
border: 1px dotted gray;
margin-right: 30px;
float: left;
list-style: none;
}
.list li:after {
content:counter(itemcounter);
color:#000;
counter-increment: itemcounter;
display: block;
background-color: pink;
padding: 0px;
text-align: left;
padding-right: 5px;
}
Define a custom counter and position it in a pseudo-element li:after.
I floated the list items to get the horizontal menu but you can also use inline-blocks.
See demo at: http://jsfiddle.net/audetwebdesign/DgZvg/
Backwards Compatibility
The limiting design factor here is the custom counter, which is supported from IE8 going forward: http://caniuse.com/#feat=css-counters
Alternative For Older Browsers
For older browsers that don't support counters and generated content, you could try something like the following.
You need to add a wrapper element on your list content:
<ol class="list">
<li><p>Apples</p></li>
<li><p>Bananas</p></li>
<li><p>Cherries</p></li>
<li><p>Durians</p></li>
</ol>
and then apply the following CSS:
.list {
margin: 0;
padding: 0;
}
.list li {
list-style-position: inside;
border: 1px dotted gray;
margin-right: 30px;
padding-left: 5px; /* gives you some control... */
float: left;
padding-top: 20px;
line-height: 20px;
width: 100px;
position: relative;
}
.list li p {
height: 20px;
margin: 0;
position: absolute;
bottom: 20px;
left: 0;
}
In this case, you list-style-position: inside, and then define a two-line text region by specifying a line-height of 20px and padding-top of 20px. You also need to specify a width on the list items.
You then set the height to the inner wrapper and then use absolute positioning to offset the bottom by 20px.
This is much more work, a bit constrained because of the width and height lengths,
but it is a proof-of-concept.
See demo at: http://jsfiddle.net/audetwebdesign/PUH9V/

Answer 2

And here is my way, with CSS 2.x and cross browser :)
HTML
<ol>
<li><span>item</span></li>
<li><span>item</span></li>
<li><span>item</span></li>
<li><span>item</span></li>
<li><span>item</span></li>
</ol>
CSS
ol li {
position:relative;
min-width:100px;
padding:30px 0 0;
float:left;
}
ol li span {
position:absolute;
left:-30px;
top:0px;
}
Working: http://jsfiddle.net/shekhardesigner/fuLjk/

Answer 3

I used a span inside the li to position the text above the element. You may need to adjust the CSS to work better in your actual environment.
http://jsfiddle.net/j5Nbx/2/
HTML
<ol class="example">
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
<li>
<span>Item</span>
</li>
</ol>
CSS
.example li {
float:left;
padding:10px;
}
.example:after{
content:"";
display:block;
clear:both;
}
.example li span {
position:relative;
left:-35px;
top:-20px;
}