如何使用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放置背景图像高于文本？

回答

相关问题