作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 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>
我已经创建了一些接近我最终希望的结果,但我仍然无法使用示例来缩进文本以使其不显示。到目前为止,这是我的 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 的问题,但我尝试了很多不同的组合,但我就是无法让它发挥作用。
如有任何帮助,我们将不胜感激。谢谢
真诚
- 梅斯蒂卡
最佳答案
如果你想在你的 anchor 标记中隐藏你的文本,只需添加 {text-indent:-9999px}
这会将你的文本移动到 -9999px
但会隐藏你的文本。这种方法称为 IR - Image Replacement
编辑:这是一个Reference由@Faust提供
关于list - CSS:使用带有背景图像的列表的水平菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6007741/
我是一名优秀的程序员,十分优秀!