0

我一直在离线处理我的导航菜单，在本地看起来很好，但是当我将它上传到网上时，一半的更改在 Chrome 上没有生效，在 Firefox 上它仍然给我一个与我试图创建的不同的设计。只是想知道我在这里可能做错了什么。我提供了设计链接，以及当前进度的实时网址。

我试图解决的几件事是：

1 - 只是试图让整体设计正确 2 - 每个菜单项之间有空格，也需要删除。

设计：http ://cl.ly/RSwr

网址：http ://www.jordancharters.co.uk/nakedradish

HTML

<div id="navigation"> 
                        <ul>
                            <li class="home-nav-bg"><a href="#"></a>
                            <li class="how-nav-bg"><a href="#">Example Us</a>
                            <li class="boxes-nav-bg"><a href="#">Example</a>
                            <li class="recipes-nav-bg"><a href="#">Example</a>
                            <li class="food-nav-bg"><a href="#">Example</a>
                            <li class="kitchen-nav-bg"><a href="#">Example</a>
                            <li class="nav-end-bg"><a href="#"></a></li>
                        </ul>
                </div>

CSS

    #navigation {
    margin-top: 10px;
    margin-bottom: 20px;
    float: right;
    width: 700px;
    margin-right: -50px;
}

#navigation ul {
    text-decoration: none;
    list-style-type: none;
    display: block;
}

#navigation li {
    font-size: 0.8em;
    color: #fff;
    display: inline;
    text-align: right;
}

#navigation li a {
    font-size: 0.8em;
    color: #fff;
    display: inline;
    padding-left: 20px;
    padding-right: 20px;
    text-align: right;
}

.home-nav-bg {
    background-image: url('../img/home-nav-bg.png');
    padding-right: 40px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.how-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.boxes-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.recipes-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.food-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.kitchen-nav-bg {
    background-color: #bf0e51;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 17px;
    padding-bottom: 18px;
}

.nav-end-bg {
    background-image: url('../img/nav-end-bg.png');
    padding-left: 5px;
    padding-right: 12px;
    padding-top: 17px;
    padding-bottom: 45px;
}
4

2 回答 2

0

inline 和 inline-block 元素的问题是浏览器填充了它们之间的空白，因为这些元素通常与文本相关，例如单词。

您可以将它们设置为显示块并浮动它们或使用本文中概述的方法之一。我通常更喜欢使用内联块。

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-09-18T14:08:10.300 回答
0

尝试使用这个

#navigation li{
 font-size: 0.8em;
 color: #fff;
 display: inline;
 text-align: right;
 float: left;
 height: 48px;
 line-height: 48px;
}
.nav-end-bg{
background-image: url('../img/nav-end-bg.png');
width: 111px;
height: 75px !important;
}

效果很好。

于 2013-09-18T14:15:08.920 回答