CSS有序列表问题

我有我试图来标记HTML有序列表可以在下面看到：CSS有序列表问题

<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

我想有丝毫内出现cenetered号码é“标签”，任何人都可以帮忙吗？

来源

2010-08-30 Burt

我假设“tag.jpg”是您的白色方形框？ – livingtech 2010-08-30 15:56:45

是的，这是正确的 – Burt 2010-08-30 21:06:12

可以使用

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

来源

2010-08-30 15:58:19 Sotiris

这是行不通的。 – Burt 2010-08-30 16:20:03

它会帮助，如果你给我们在jsbin.com – Sotiris 2010-08-30 16:29:01

嘿伯特，什么Sortiris被指出是你的订单列表有着怎样的运行重复背景的在这里看到一个很好的解释：http://codeasily.com/css/style-ordered-list

我试图做你在说什么，但我担心它可能不可能，没有自定义数字或标记。

然而，您仍然走在正确的轨道上，但是我会让ol列表样式为inside，那么您仍然必须找出一种方法将订单列表号码从列表内容中推出。

看起来你会想要将自己的计数器添加到列表中。

来源

2010-08-30 16:33:11 theGoose

上的实例我没有真正从他的帖子得到这个，但感谢清理它。看看我是如何在下面解决的，而不是对额外的标记进行修改，但不知道其他方式。 – Burt 2010-08-30 21:20:07

一个选择可能是让你的白色方形图像变大，所以它的高度与你希望你的身高一样高。然后将其作为ol而不是li的背景，并使其在y方向上重复。

另一种选择是切换ol如前所述具有的inside一种风格，然后贴span您li里面有一些padding-left要定位。

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

来源

2010-08-30 17:43:47 joelt

排序在这里为我做了什么：

首先，我添加内容周围的跨度标签：

<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（感谢乔）的建议和终于能够使用跨度标签上的负余量转移东西：

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

来源

2010-08-30 21:18:46 Burt

CSS有序列表问题

回答

相关问题