如何使用CSS放置背景圖像高於文本？

我試圖讓我的HTML非常簡單。我有一個聲明瞭一個嚮導的名字，比如集合步驟的一組列表...如何使用CSS放置背景圖像高於文本？

<div> 
    <ul class="wizardBar"> 
     <li class="step1">Step One</div> 
     <li class="step2">Step Two</div> 
     <li class="step3">Step Three</div> 
    </ul> 
</div>

在我的CSS文件格式化我有以下...

.wizardbar 
{ 
    display:table;   
    padding:0; 
    margin:0; 
    white-space:wrap; 
    list-style-type:none; 
} 
* html .wizardbar { 
    display:inline-block; 
    width:1px; 
    padding:0 2px; 
} 
.wizardbar li 
{ 
    display:table-cell; 
    width: 116px; 
    text-align: center; 
    padding-top: 36px; 
} 
.step1 
{ 
    background: url('Step1.gif') no-repeat; 
} 
.step2 
{ 
    background: url('Step2.gif') no-repeat; 
} 
.step3 
{ 
    background: url('Step3.gif') no-repeat; 
}

我試圖在這裏完成的事情就像......

Step1.gif ..... Step2.gif ..... Step3.gif
.STEP 1 ........ STEP 2 ........第3步

Whe重新輸入步驟名稱即：該步驟的圖像下方顯示「步驟1」。目前，文字在圖像的上方。我不希望有任何重疊。用該填充頂，直到你得到你所需要的正確距離

.div.wizardBar li { 
padding-top: 50px; 
}

小提琴：

感謝，賈斯汀

來源

2010-11-19 Justin

添加到您的CSS文件。

來源

2010-11-19 18:05:31

鑑於你詳述了進展，固有有序結構，我強烈推薦代替ul的使用ol。這就是說，下面要達到你的目的，儘管不是那樣乾淨，因爲我想：

li { 
    padding-top: 30px; /* equal to or greater than the background-image's height */ 
}

與菜單式選擇將增加的特異性，如果需要添加前綴li。

來源

2010-11-19 18:08:45

我會給背景位置的CSS屬性一看，可能與調整元素的大小一起。

http://www.w3schools.com/css/pr_background-position.asp瞭解更多。

來源

2010-11-19 18:10:15 RichardW1001

如何使用CSS放置背景圖像高於文本？

回答

相關問題