即使使用正确的样式，列表也不会水平对齐

Question

我想要完成的事情非常简单。

我正在尝试重新创建这个

http://www.adtile.me/fixed-nav/

但是，导航在水平方向上不与我合作。

.HTML

<div id="wrapper">
    <header class="shadow">
        <img id="logo"src="assets/images/logo white.png" width="305" height="78"/>   
            <nav class="nav-collapse">
                <ul id="horizontal">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
    </header>
</div>

.CSS

#horizontal {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

演示

Answer 1

您需要在列表项上调用inline，而不是父ul：

#horizontal li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}

小提琴