首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >活动菜单项下居中的CSS箭头图像不显示

活动菜单项下居中的CSS箭头图像不显示
EN

Stack Overflow用户
提问于 2014-05-02 00:24:00
回答 2查看 4.4K关注 0票数 0

我想把一个箭头图像(png)放在我的活动项目菜单的中心,而不是我实际的蓝色边框线。我试图修改我的css,但没有运气,图像没有出现。你知道我做错了什么吗?

My CSS

代码语言:javascript
复制
    #cssmenu ul {
    margin: 0;
    padding: 0;
    font-size: 12pt;
    font-weight: bold;
    background: #94adc1; 
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 1px solid #f2f1f2;
    zoom: 1;
    text-align:center; 
}

#cssmenu ul:before {
    content: '';
    display: block;
}

#cssmenu ul:after {
    content: '';
    display: table;
    clear: both;
}

#cssmenu li {
    float: left;
    margin: 0 auto;
    padding: 0 4px;
    list-style: none;

}

#cssmenu li a {
    display: block;
    float: left;
    color: #123b59; 
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px 7px 20px;
    border-bottom: 3px solid transparent;
}

#cssmenu li a:hover {
    content: url("images/arrowmenunav.png");
    /*color: #6c8cb5;
    border-bottom: 3px solid #00b8fd;*/
}

#cssmenu li.active a {
    /*display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;*/
    content: url("images/arrowmenunav.png");

}

#cssmenu {
    width: 100%;
    position: fixed;
    height:94px; 
}

My menu in HTML

代码语言:javascript
复制
<div id="cssmenu">
    <ul id="list">
        <li><a href="#home" >home</a></li>
        <li><a href="#home2">home2</a></li>
        <li><a href="#newsletter">newsletter</a></li>
</ul>
</div>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-05-02 00:47:16

我首先看到的是这条线

代码语言:javascript
复制
#cssmenu li.active a {
    content: url("images/arrowmenunav.png");
}

应该是这样:

代码语言:javascript
复制
#cssmenu li.active a:after {
    content: url("images/arrowmenunav.png");
}

我已经设置了这个jsfiddle,以便更详细地显示它 http://jsfiddle.net/e3WEs/2/

在这里,我使用了一个20px x 20px的占位符图像。负边距应为图像宽度的一半(本例中为10px),以使其与父元素居中对齐。

这里的版本也适用于较旧的浏览器(IE7及更低版本) http://jsfiddle.net/e3WEs/3/

票数 3
EN

Stack Overflow用户

发布于 2014-05-02 00:57:50

如果你不想使用,另一个选择是:after。:after几乎不被旧浏览器支持,如果你担心的话。

http://jsfiddle.net/f3SQx/

加价

代码语言:javascript
复制
<li><a href="#home">home</a>
<div class="active"></div>
</li>

CSS

代码语言:javascript
复制
.active {
 position:absolute;
 width:30px;
 height:30px;
 top:100%;
 margin-left:32%;
 content: url("images/arrowmenunav.png");
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23411896

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档