html - css水平导航bug

Question

我在样式化我的 CSS 导航栏时遇到问题。最后一个列表项被放到第二行，这对网站来说真的很糟糕。有人可以查看我的代码并发现我做错了什么吗？提前致谢。

HTML：

  <div id="HorizNav">
    <ul>
      <li><a href="#" id="horiznav-first">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#" id="horiznav-last">Social Media</a></li>
    </ul>
  </div>

CSS：

#HorizNav ul {
  float: right;
  text-Align: left;
  width: 465px;
  height: 50px;

  background: #ff0000;
  color: #fff;
  font-size: 12px;

}

#HorizNav ul li { float: left; }

#HorizNav ul li a {
  display: block;
  text-decoration: none;
  background: #aa00ff;
  color: #fff;

  width: 92px;
  height: 20px; /* height minus padding-top */

  padding-top: 30px;
  padding-left: 10px;

  border-right: 1px solid #fff;
}

#HorizNav ul li a:hover {
  background: #fff;
  color: #aa00ff;
}

#HorizNav ul li a#horiznav-last { none; }

Answer 1

在您的 CSS 中更改此规则

#HorizNav ul {
  float: right;
  text-align: left;
  width: 515px;
  height: 50px;

  background: #ff0000;
  color: #fff;
  font-size: 12px;

}

演示 http://jsfiddle.net/n5B5W/6/