css - 请提供一些 css 帮助(ol li 东西)

Question

所以我正在做一个自定义的 ol li 列表，我真的对 ol 、 ul 和 li 的快捷方式 css 感到困惑。

如果我告诉你我想要什么，并提供一些示例代码，请有人帮忙。

好吧，我正在寻找像这样的编号列表......

<ol>
    <li>Dave Jones<span class="searchTotals">189 searches</span></li>
    <li>Debs<span class="searchTotals">34 searches</span></li>
    <li>Tarbutt<span class="searchTotals">211 searches</span></li>
</ol>

我想做的是不在 li 元素中重复 span 类，所以也许你可以提供帮助。

我还想给每一行编号样式。

只要在每个数字周围画一个圆圈..

这是数字的一些 css。

background: none repeat scroll 0 0 #ec008c;
border-radius: 1em 1em 1em 1em;
color: #FFFFFF;
display: inline-block;
float: right;
font-family: inherit;
font-size: 10px;
font-weight: bold;
line-height: 1em;
margin-left: 0.5em;
padding: 0.35em 0.5em;
text-align: center;
text-decoration: none;

这是 SPAN 类的一些 CSS。

float:right;
color:#3399ff;

试图让它看起来像这样:

Answer 1

如果您希望在不使用 span 标签的情况下将 div 中的所有文本 float 到左侧，您可以使用此方法:(不能使用 CSS 选择部分文本)

ol li {
   float:left;
   color:#3399ff;
}

如果您希望使用 li 将数字用圆圈环绕，您将不得不使用图像并使用 background:url() 属性。