Question

我一直在线下我的导航菜单，在本地看起来很好但是当我在网上上传时，一半的更改没有在Chrome上生效，而在Firefox上它仍然给我一个不同于我想要的设计创建。只是想知道我在这里做错了什么。我已经提供了设计的链接，以及当前进展的实时网址。

我想解决的几件事情是：

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

网址：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;
}

Answer 1

内联和内联块元素的问题是浏览器填充空格，因为这些元素通常与文本相关，例如单词。

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

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

Answer 2

尝试使用此

#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;
}

工作正常。

导航项间距

2 个答案: