如何在没有额外 div 的情况下执行此浮动/对齐？

Question

我正在尝试获取一个导航栏，该导航栏包含一个导航栏，其中包含一个无序列表，以与页面宽度的右侧对齐。导航本身应该跨越整个宽度（它是一个横跨整个页面的黑条），但链接本身应该与内容宽度的右侧对齐，如下所示：

|                                        home | about | etc.               |
|                                                                          |
|            This is content with a fixed with in the center               |
|            of the page.                                                  |

我拥有的 HTML：

<nav>
 <ul id="navlist">
  <li><a href="#">Home</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">etc,</a></li>
 </ul>
</nav>

CSS：

nav {
  display:block;
  background:#000;
 }

  nav ul {
   margin: 0 auto;
   width: 777px;
  }
   nav ul li {
    float:left;

   }

但当然这是在页面的左侧，如果不添加额外的 div 元素，我似乎无法将其移到右侧...唯一的选择是浮动 <li> 的右侧，但这意味着我的导航顺序是相反的，我真的不希望这样......这是在 wordpress 安装中自动生成的页面列表，所以我可以在管理面板中反向排序页面，但必须更改后端stuff 并不是处理设计的好方法。

有人吗？

Answer 1

nav {
  display:block;
  background:#000;
  text-align:right;      
 }

  nav ul {
   margin: 0 auto;
   width: 777px;
  }
   nav ul li {
    display: inline;

   }