html - 有序列表中的 float 跨度

Question

我试图在 li 中 float 两个 span。左跨度将有我的标签，在右跨度内我将构建一个具有嵌套跨度的图形。我有基本结构，但 chrome 将数字放在左侧跨度的末尾。我该如何解决这个问题？

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