将导航栏对齐/浮动到右侧

Question

我目前正试图将我的导航栏对准右侧,但它固执地坚持左侧,我不知道该怎么做.我觉得我已经尝试了所有东西 - 文本对齐,浮动等.我还包括HTML5 CSS重置,如果这有所不同.

有人可以查看我的代码并让我知道是否有某些原因这些导航项目不会移动到另一侧？我真的很沮丧.谢谢.

HTML:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

CSS:

  body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-  left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}

注意:这是我修复它的hacky方式

ul {text-align: right; width: 100%; background-color: #999; height: 20px; **padding-left: 750px;**}

但是,我不确定这是一个非常好的方法...

Answer 1

一个,无可否认的非常愚蠢的解决方案(但它的工作原理)是将列表项浮动到右边,然后在HTML中反转它们的顺序.像这样:

<ul>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="index.html">Home</a></li>
</ul>

body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {text-align: right; width: 100%; background-color: #999; height: 20px;}
li {float: right;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}

这是它的JSFiddle

Answer 2

这很容易

http://jsfiddle.net/qZ7Tr/10/

改成li float​display:inline;

body {
    font: normal 300 .8em'Open Sans', sans-serif;
    overflow-x:hidden;
}
ul {
    text-align: right;
    width: 100%;
    background-color: #999;
    height: 20px;
}
li {
    display:inline;
}
ul a {
    color: white;
    padding: 0 10px;
    text-decoration: none;
}
ul a:hover {
    color: #333;
}