html - 如何在没有额外 div 的情况下进行 float /对齐？

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 元素我似乎无法将它移到右侧...唯一的选择是 float <li>是的，但这意味着我的导航是倒序的，我真的不希望这样……这是在 wordpress 安装中自动生成的页面列表，所以我可以在管理面板中反向排序页面但是不得不改变后端的东西并不是处理设计的好方法。

有人吗？

Answer 1

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

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

   }