Question

我正在设置一个箭头导航，我有一个下一个和上一个按钮。需要在IE 7及更高版本中得到支持。

对于下一个，我希望背景图像显示在下一个文本的右侧。然后在上一个按钮中，我希望文本显示在上一个文本的左侧。我觉得这很容易，但我只花了2个小时。

在我发疯之前，任何人都可以帮忙解决这个问题。

<span class="next">
<a href="#">Next Month</a>
August
</span>


<span class="prev">
<a href="#">Previous Month</a>
June
</span>

在我的CSS中，我有左侧按钮，效果很好。

.prev a, .next a {
    background: url("sprite.png") no-repeat scroll -200px -5px transparent;
    display: inline-block;
    height: 25px;
    text-decoration: none;
    text-indent: -9999em;
 }

.prev {
  float: left; 
}

.next {
  float: right; 
}

.next a {
   background-position: -200px -18px; 
}

Answer 1

@chapsterj;第一个span是inline元素，因此，在他的CSS中定义display:block。其次，不需要text-indent＆amp;第三，你可以不用额外的span标签。这样做

<a href="#" class="next">Next Month</a>
<a href="#" class="prev">Previous Month</a>

的CSS：

a.prev, a.next{
    background: url("sprite.png") no-repeat scroll -200px -5px transparent;
    display:block;
    height: 25px;
    text-decoration: none;
 }

.prev {
  float: left;
  padding-right:40px; 
}

.next{
   background-position: -200px -18px; 
   float: right;
   padding-left:40px;
}

对齐span标记中的文本

1 个答案: