Question

我有一个有序列表，我试图标记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

我希望数字显示在白色“标签”中，任何人都可以帮忙吗？

Answer 1

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

我试图做你正在谈论的事情，但我担心如果没有自定义数字或标记，这可能是不可能的。

你走在正确的轨道上，但是我会制作ol列表样式inside，那么你仍然需要找到一种方法来将订单列表号推离列表内容。

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

Answer 2

你可以使用

对于background: transparent url(../images/tag.jpg) no-repeat;，

ol.tags，而不是ol.tags li

Answer 3

一种选择可能是让你的白色方形图像更大，所以它与你想要的高度一样高。然后将其设为ol的背景而不是li，并使其在y方向重复。

另一种选择是将ol切换为前面提到的inside样式，然后在span内加li padding-left {{1}}将它放在你想要的位置。

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

Answer 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）的建议把小数点移到了里面，最终能够在span标签上使用减去边距来移动东西：

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

CSS有序列表问题

4 个答案: