CSS有序列表问题答案

【问题标题】：CSS Ordered List ProblemCSS有序列表问题
【发布时间】：2010-09-01 02:01:13
【问题描述】：

我有一个有序列表，我正在尝试标记 HTML，如下所示：

<ol class="main tags">
    <li class="main">Gump...</li>
    <li>We ar...</li>
    <li>We a...</li>
</ol>

CSS 如下所示：

ol.tags {
    list-style: decimal  none outside;    
}

ol.tags li {
    background: transparent url(../images/tag.jpg) no-repeat;
    height: 80px;
    margin: 0px 0px 0px 0px;
    padding: 16px 0px 0px 60px;
}

结果如下：

http://gumpshen.com/images/temp/Gumpshen_OL.png

我想让数字出现在白色“标签”内，有人可以帮忙吗？

【问题讨论】：

我假设“tag.jpg”是你的白色方块？

标签： html css

【解决方案1】：

Hey Burt，Sortiris 指出的是您的订单列表有一种运行重复的背景，请在此处查看一个很好的解释：http://codeasily.com/css/style-ordered-list

我已经尝试过你所说的，但我担心如果没有自定义数字或标记，这可能是不可能的。

但是，您在正确的轨道上，但我会创建ol 列表样式inside，然后您仍然必须想办法将订单列表编号从列表内容中推开。

您似乎想要将自己的计数器添加到您的列表中。

【讨论】：

我并没有真正从他的帖子中得到这一点，但感谢您清理它。看看我是如何在下面解决它的，不关心额外的标记，但不知道有任何其他方法。

【解决方案2】：

你可以使用

background: transparent url(../images/tag.jpg) no-repeat; 代表 ol.tags，而不是 ol.tags li

【讨论】：

如果你在 jsbin.com 上给我们一个活生生的例子会有所帮助

【解决方案3】：

一种选择可能是使您的白色方形图像更大，因此它与您希望 li 的高度一样高。然后将其作为ol的背景而不是li，并使其在y方向重复。

另一种选择是将ol 切换为具有inside 的样式，如前所述，然后在li 中粘贴span 和一些padding-left 以将其放置在您想要的位置。

编辑：通过使白色方形图像更大，我的意思是添加透明的“填充”，或者与页面背景相匹配的东西。所以图像尺寸更大，但白色区域保持不变。

【讨论】：

【解决方案4】：

在这里排序是我所做的：

首先我在内容周围添加了一个 span 标签：

<ol class="main tags">
    <li class="main"><span>Gumpshen was founded by Brendan Rice who has over 10 years experience in web development.</span></li>
    <li><span>We are web design & development studio who are passionate about what we do.</span></li>
    <li><span>We are based in Belfast, Northern Ireland and but don't let that put you off if you are not from Northern Ireland we would still love to help.</span></li>
</ol>

按照 joelt 的建议（感谢 Joe），我将小数移到了内部，最终能够使用跨度标签上的负边距来移动内容：

ol.tags {
    list-style: decimal  none inside;

}

ol.tags li {
    background: transparent url(../images/tag.jpg) no-repeat;    
    height: 80px;
    margin: 0px 0px 0px 0px;
    padding: 26px 0px 0px 20px;
}

ol.tags li span {    
    margin: -24px 0px 0px 50px;
    display: block;
}

【讨论】：