有序列表中的浮动范围

Question

我试图在里面漂浮两个跨度。左侧跨度将具有我的标签，在右侧跨度内，我将构建具有嵌套跨度的图形。我有基本的结构，但铬正在将数字放在左侧跨度的末尾。我该如何解决这个问题？

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

家长css

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

项目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;}

这是FF，Chrome和IE的显示

Answer 1

您只需要在items.css修改您的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;}