Question

我正在努力保持HTML非常简单。我有一个设置列表，它声明了一组向导的名称...

<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 ........第2步........第3步

步骤名称即：“步骤1”出现在该步骤的图像下方。目前，文本位于图像的顶部。我不想要任何重叠。

谢谢，贾斯汀

Answer 1

将此添加到您的css文件中：

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

摆弄衬垫顶部，直到获得所需的正确距离。

Answer 2

鉴于您正在详细说明一个进展，一个固有的有序结构，我强烈建议您使用ol代替ul。也就是说，以下应该达到你的目标，尽管不像我想的那样干净：

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

如果需要，使用您选择的菜单类型为li加上前缀会增加特异性。

Answer 3

我给出了背景位置CSS属性，可能与调整元素大小有关。

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

如何使用CSS放置背景图像上下文本？

3 个答案: