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

我试图创建一个简单的菜单，其中有四个菜单项，每个菜单项都有一个图像，然后每个菜单项都有一个特殊的图像

我正在使用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>

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

任何帮助都将不胜感激。 多谢各位

真诚的

---

-Mestika

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

如果您有权更改链接文本，并且允许您包含带有未进行HTML字符编码的值的标记

然后用跨距（例如：

Question

-->

Question

）围绕每个链接文本，使每一行看起来像：

<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>

否则，我认为您唯一的其他方法是使文本非常小并接近图像的颜色：

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

---

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

如果您有权更改链接文本，并且允许您包含带有未进行HTML字符编码的值的标记

然后用跨距（例如：

Question

-->

Question

）围绕每个链接文本，使每一行看起来像：

<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>

否则，我认为您唯一的其他方法是使文本非常小并接近图像的颜色：

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

---

如果要在锚定标记中隐藏文本，只需添加

{text indent:-9999px}

，这会将文本移动到

-9999px

，但会隐藏文本。这种方法称为红外图像置换

---

编辑：这里有一个由@Faust提供的链接如果您想在锚定标记中隐藏文本，只需添加

{text indent:-9999px}

即可将文本移动到

-9999px

，但会隐藏文本。这种方法称为红外图像置换

---

编辑：这里有一个由@Faust提供的“a-href中的文本”，你是指标签的内部文本，还是指href属性的值？通过“a-href中的文本”，你是指标签的内部文本，或者你是指href属性的值吗？很好——我会将其添加到我的箭袋中。这让我查找了“红外图像替换”，并找到了一个与各种红外技术的良好链接，你可能希望在回答中包含这一点：@Faust Done！在我的回答中包括它，以帮助梅斯蒂卡理解这种方法的使用。我的第一个想法是使用文本缩进，但在应用效果上有困难。但几个小时后，我终于管理好了它，所有这些麻烦的原因之一是我忘记了如何在一个HTML标记中应用多个类。非常感谢你的回答和链接！祝你愉快day@Mestika没问题。我经常使用这种方法。很高兴能帮助你。很好的一个——我将把它添加到我的箭袋中。这让我查找了“红外图像替换”，并找到了一个与各种红外技术的良好链接，您可能希望在您的答案中包含以下内容：@Faust Done！在我的回答中包括它，以帮助梅斯蒂卡理解这种方法的使用。我的第一个想法是使用文本缩进，但在应用效果上有困难。但几个小时后，我终于管理好了它，所有这些麻烦的原因之一是我忘记了如何在一个HTML标记中应用多个类。非常感谢你的回答和链接！祝你愉快day@Mestika没问题。我经常使用这种方法。很高兴帮助你。