CODEWITHSUNDEEP
htmlcss
learning...
learning...

Reputation: 3184

floating spans inside ordered list

I am trying to float two spans inside li. Left span will have my label where as inside the right span i'll build a graph with a nested span. I have the basic structure but chrome is placing the number at the end of the left span. How can i fix this issue?

HTML

<ol class="matchGraph">
                    <li>
                        <span class="leftLabel">Texas</span>
                        <span class="rightMatch"><span class="barchart" style="width: 67%"></span><span class="barchartNumber">67%</span></span>
                    </li>
</ol>

CSS

Parent css

.inner .textBlock ul, .inner .textBlock ol { margin: 0;padding-left: 20px;}

Items css

ol.matchGraph { width: auto;margin: 0;}
ol.matchGraph li {margin-bottom: 5px;}
ol.matchGraph li .leftLabel {float: left; width: 60%;display: block;}
ol.matchGraph li .rightMatch { float: right;width: 38%;display: block;}

And here is the display from FF, Chrome and IE

enter image description here

Upvotes: 1

Views: 967

Answers (1)

Gonsalo Sousa
Gonsalo Sousa

Reputation: 495

You just need to modify your css at items.css.

ol.matchGraph { width: auto; margin: 0;}
ol.matchGraph li {margin-bottom: 5px;}
ol.matchGraph li .leftLabel {width: 60%; display: inline-block;}
ol.matchGraph li .rightMatch {width: 38%; display: inline-block;}

Upvotes: 2

Related Questions