CSS有序列表問題

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

嘿Burt，Sortiris指出的是你的訂單列表有一種運行重復背景的地方，請看這里的一個很好的解釋： http ： //codeasily.com/css/style-ordered-list

我試圖做你正在談論的事情但我擔心這可能是不可能的，沒有自定義數字或標記。

你是在正確的軌道，但我會在inside制作ol列表樣式，然后你仍然需要找出一種方法來推動列表內容的訂單列表號碼。

您似乎希望將自己的計數器添加到列表中。

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要定位。

編輯：通過使白色方形圖像更大，我的意思是添加透明的“填充”，或者與頁面背景相匹配的東西。 因此圖像具有更大的尺寸，但白色區域保持不變。

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