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;

}

DEMO http://jsfiddle.net/n5B5W/6/

css水平导航bug

1 个答案: