Q

訂單列表 - 包含列表式十進制的背景圖片

css
listitem

2012-02-29 42 views 1 likes

1

我正在處理有序列表。有一個背景圖像。我想要做的是有數字「1」，「2」等坐在背景圖像的頂部。在圖像和列表項之間添加合適的填充。訂單列表 - 包含列表式十進制的背景圖片

我的工作的一個例子是在這一個Here

感謝。

乾杯

2012-02-29 StuBlackett

A

回答

2

在你的css中寫list-style: decimal inside; &調整你的填充。檢查：

http://jsfiddle.net/KnMhS/2/

2012-02-29 15:24:33 sandeep

+0

關於使用'inside'作爲列表樣式的小問題：多行項目將環繞您的數字。例如：http://jsfiddle.net/KnMhS/8/ – isotrope 2012-02-29 15:51:50

1

這是我寫的可能是使用你http://csswizardry.com/2010/11/mark-up-a-semantic-accessible-progressively-enhanced-mobile-optimised-progress-bar-bonus-style-the-numbers-in-an-ordered-list/#section-numbers

^h

2012-02-29 15:17:40 csswizardry

1

只要把list-style-position: inside;這裏顯示的CSS元素ul.what_list

上 - >http://jsfiddle.net/KnMhS/1/

爲了能夠改變子彈的顏色。你不能真的只是做子彈。你可以做的是將li的顏色設爲白色。然後創建一個span與一類可以說color和顏色的元素黑色。看到這裏 - >http://jsfiddle.net/KnMhS/4/

2012-02-29 15:21:09 Henesnarfel

+0

偉大的東西。如何讓數字變成白色，但內容是黑色的？對不起，這是一個新問題 – StuBlackett 2012-02-29 15:24:32

+1

@StuBlackett檢查出我的另外你的其他問題 – Henesnarfel 2012-02-29 15:33:57

+0

嗨@Henesnarfel ..任何想法如何讓這個工作在可怕的IE7？ – StuBlackett 2012-03-06 16:22:15

1

這裏有一個小提琴，使用一些CSS櫃檯：魔術前：http://jsfiddle.net/KnMhS/7/

ol.what_list { 
    margin-left: 0; 
    padding-left: 0; 
    margin-top: 80px; 
    list-style: none; 
    counter-reset:item; 
} 

ol.what_list li { 
    padding-left: 0px; 
    margin-left:30px; 
    min-height: 35px; 
    counter-increment:item 
} 

ol.what_list li:before { 
    content: counter(item); 
    display: inline-block; 
    background: url(http://i44.tinypic.com/9ihj4m.png) no-repeat center center; 
    width: 30px; 
    height: 31px; 
    margin-left: -30px; 

    text-align: center; 
    line-height: 31px; 
    color: white; 
}

2012-02-29 15:48:01 isotrope

+0

請注意，在所有版本的IE中都不支持此操作： http://msdn.microsoft.com/en-us/library/cc351024%28v = vs.85％29.aspx＃pseudoelements http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#generated – isotrope 2012-02-29 15:59:10

相關問題