Question

我正在尝试创建一个简单的菜单，其中我有四个菜单项，每个菜单项都有一个图像，然后每个活动的项目都有一个特殊的图像。

我正在使用Drupal，所以HTML输出无法更改（不管怎么说都不容易）所以我的问题是使用下面提供的HTML代码是否以及如何完成：

<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first"><a href="/bagsmaekken?quicktabs_2=0#quicktabs-2" id="quicktabs-tab-2-0" class="qt_tab active">Question</a></li>
<li class="qtab-1"><a href="/bagsmaekken?quicktabs_2=1#quicktabs-2" id="quicktabs-tab-2-1" class="qt_tab active">Lead</a></li>
<li class="qtab-2"><a href="/bagsmaekken?quicktabs_2=2#quicktabs-2" id="quicktabs-tab-2-2" class="qt_tab active">Board</a></li>
<li class="qtab-3 last"><a href="/bagsmaekken?quicktabs_2=3#quicktabs-2" id="quicktabs-tab-2-3" class="qt_tab active">Ready</a></li>
</ul>
</div>

我已经创建了一些接近我最终希望的结果但是我仍然遇到例子缩进文本而没有显示的问题。到目前为止，这是我的CSS：

ul.quicktabs_tabs li {display:inline; }

#quicktabs-2 li.active a {
  background-image:url(question-active.png);
background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:135px;
  padding-right:5px;
}

#quicktabs-2 li.qtab-1 a {
  background-image:url(lead-grey.png);
background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
  background-image:url(board.png);
  background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;   
}
#quicktabs-2 li.qtab-3 a {
  background-image:url(ready-grey.png);
  background-position:5px 0px;
  background-repeat:no-repeat no-repeat;
  padding-bottom:18px;
  padding-left:29px;
  padding-right:50px;
}

到目前为止，这是我的代码，它正确地显示了我的图像，它们之间的间距正确但是a-href中的文本我无法隐藏。我相当肯定这只是一个关于正确的样式类/ id的问题，但我尝试了很多不同的组合，我只是无法让它发挥作用。

非常感谢任何帮助。谢谢

施
- 梅斯蒂卡

Answer 1

如果您想在锚标记中隐藏文字，只需添加{text-indent:-9999px}，这会将您的文字移至-9999px，但会隐藏您的文字。这种方法称为IR - 图像替换

修改：以下是@Faust提供的Reference

Answer 2

听起来您主要关心的是替换链接中的文本（不？）。

如果您有权更改链接文本，并且允许您使用那些未获得HTML字符编码的值包含标记，

然后用跨度（例如：Question - ＆gt; <span>Question</span>）包围每个链接文本，以便每行看起来像：

<li class="qtab-0 active first"><a href="/bagsmaekken?quicktabs_2=0#quicktabs-2" id="quicktabs-tab-2-0" class="qt_tab active"><span>Question<span></a></li>

...然后你可以用这个CSS隐藏文字：

#quicktabs-2  a span {display:none;}

否则，我认为你唯一的另一个办法就是让文字非常小，并且接近图像的颜色：

#quicktabs-2  a {font-size:1px;text-decoration:none;color:grey}

CSS：使用带有背景图像的列表的水平菜单？

2 个答案: