CSS 导航和背景图像

Question

我有CSS导航

.navigation{
    float:right;
    width:718px;
    background-image:url('http://inauguralseason.com/images/nav.png');
}
.navigation ul {
    float: right;
    list-style-type: none;
    margin: 0;
}
.navigation li {
    float: left;
}
.navigation ul a {
    color: #FFF;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}

但是背景图像没有出现，当我删除这一行时

.navigation li {
    float: left;
}

出现背景图像，但我的导航未水平对齐。

有什么想法吗？

这是 HTML

<div class="navigation">
<ul>
<li><a href="#">Shop</a></li>
<li><a href="#">Our Collection</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">News</a></li>
</ul>
</div>

谢谢

Answer 1

检查这个小提琴。

图像就在那里。只是容器（在本例中为div）不够高，无法显示图像。所以你只看到图像的顶部。

通过强制容器的高度（可能与图像的高度相同），将显示整个背景图像。