首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >chrome和firefox中的css导航菜单问题

chrome和firefox中的css导航菜单问题
EN

Stack Overflow用户
提问于 2011-08-17 20:19:10
回答 2查看 2.1K关注 0票数 0

嗨,我写了css代码来显示菜单栏。面对如此多的问题,谷歌了他们,并找到了解决方案。但这个我找不到。

这是chrome输出,在菜单框之间有间隙,但是如果firefox没有任何问题的话。它的联系人。我该如何解决这个问题?

CSS

代码语言:javascript
运行
复制
#candymenu li {
    list-style-type: none;
    display: inline-block;
    width: 8.1em;
    float: center;
    text-align: center;
    font-family: "Lucida Grande", sans-serif;
    height: 3em;
}
#candymenu ul {
    width: 100%;
    margin:0 153px;

}   


#candymenu li a {
    display: inline-block;
    margin 150px;    
    padding: .5em .5em .5em .5em;
    text-decoration: none;
}

#candymenu li {
    list-style-type: none;
    display: inline-block;

    width: 8.1em;
    float: center;
    text-align: center;
    font-family: "Lucida Grande", sans-serif;
    height: 3em;
    border-right: 1px #818181 solid;
    -webkit-box-shadow: 1px 1px  #bbb;
    box-shadow: 1px 1px  1px #bbb;
}

#candymenu li a {
    display: inline-block;
    padding: .8em .5em .5em .5em;
    text-decoration: none;
    color: #292929;
    text-shadow: 1px 1px 1px #cccccc;
}

#candymenu li {
    background-color: #c9c9c9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9),    to(#848484), color-stop(0.6, #a1a1a1));
}

#candymenu li:hover {
    background-color: #dc3d73;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dc3d73), to(#4c4c4c), color-stop(0.6, #474747));
}

#candymenu li:hover a {
    color: #e8e8e8;
    text-shadow: 1px 1px 0px #353535;
}

HTML

代码语言:javascript
运行
复制
<div id="candymenu">    
    <ul>
        <li id="home">
            <a href="">Home</a></li>
        <li id="Gaming">
            <a href="">Gaming</a></li>
        <li id="Reviews">
            <a href="">Reviews</a></li>
        <li id="News">
            <a href="">news</a></li>
        <li id="Interviews">
            <a href="">interviews</a></li>
        <li id="download">
            <a href="">Download</a> </li>
        <li id="support">
            <a href="">Support</a></li>
        <li id="candy">
            <a href="">Candy</a></li>
        <li id="events">
            <a href="">Events</a></li>
    </ul>
</div>

现在我该如何缩小这个差距呢?

EN

Stack Overflow用户

回答已采纳

发布于 2011-08-17 20:37:43

我认为内联块会导致依赖于空格的布局,这很糟糕。

因此,您基本上需要将所有li标记背靠背地放在一行上。如下所示:

代码语言:javascript
运行
复制
<div id="candymenu">    
    <ul>
        <li id="home"><a href="">Home</a></li><li id="Gaming"><a href="">Gaming</a></li>

等。

如果成功了,请让我知道!

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7092649

复制
相关文章

相似问题

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