显示：阻止导航对齐

Question

我尝试使用display:block;和display:inline;让我的导航器对齐，但它似乎没有动摇。我错过了什么简单的事情？

<nav id="head-nav">
            <ul>
                <li class="first current">
        <a href="http://commercial.co.nz/index.php/home">Home</a>
    </li>
    <li class="last">
        <a href="http://commercial..co.nz/index.php/contact">Contact</a>
    </li>

            </ul>
        </nav>

#head-nav{
    display:block;
    float:right;
    width:710px;
    border:1px solid red;
    margin:45px 0 0 0;
}
#head-nav ul li a{
    display:block;
    height:25px;
    width:60px;
    background-color:cyan;
}

Answer 1

要将它们对齐在同一行，您需要添加float：left;到了css for li

#head-nav ul li{
    float:left;
}

另外，在某些较旧或非html5浏览器中，这可能无法正常呈现。您应该添加条件语句或使用＆lt; div＆gt;标签代替。