我有这样的无序列表:
<div class="sub-navigation">
<ul>
<li>
<a href="features.html" class="active">Exterior</a>
</li>
<li>
<a href="interior.html">Interior</a>
</li>
<li>
<a href="kitchen-bath.html">Kitchen & Bath</a>
</li>
<li>
<a href="mechanical.html">Mechanical</a>
</li>
</ul>
</div>
一个项目链接使该类处于活动状态。
这是我在css中的活跃课程:
.sub-navigation ul li a.active {
background-image: url(../images/sub-navigation-indicator.png);
background-repeat: no-repeat;
}
图像出现在文本外部的开头,我正在寻找将其放在文本下方。如果我尝试使用background-position
,它就会消失,我会把它降下来。请帮忙。
以下是jsFiddle
答案 0 :(得分:1)
尝试使用伪元素:
.sub-navigation ul li a.active::after {
content: url(http://magnaboss.com/sub-navigation-indicator.png);
display: block;
padding: 5px;
text-align: center;
}
答案 1 :(得分:0)
添加此
.sub-navigation ul li
{
padding: 5px;
}
.sub-navigation ul li a
{
padding: 5px;
}
.sub-navigation {
background-color: #ccc;
height: auto;
}
.sub-navigation ul {
list-style: none;
padding: 0px 20px;
}
.sub-navigation ul li {
float: left;
text-transform: uppercase;
font-size: 26px;
font-family: Arial;
font-weight: 300;
padding: 15px;
}
.sub-navigation ul li a {
color: red;
text-decoration: none;
}
.sub-navigation ul li a.active {
background-image: url('data:image/jpeg;base64,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');
background-repeat: no-repeat;
}
<div class="sub-navigation">
<ul>
<li><a href="features.html" class="active">Exterior</a></li>
<li><a href="interior.html">Interior</a></li>
<li><a href="kitchen-bath.html">Kitchen & Bath</a></li>
<li><a href="mechanical.html">Mechanical</a></li>
</ul>
</div>
答案 2 :(得分:-1)
只是一个快速的猜测,但尝试用以下内容替换该行:
<li><a href="features.html">Exterior</a><p class="active"> </p></li>