如何在没有额外 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 元素，我似乎无法将其移至右侧...唯一的选择是将

的右侧浮动，但那这意味着我的导航是相反的顺序，我真的不希望这样...这是在 WordPress 安装中自动生成的页面列表，因此我可以在管理面板中反向排序页面，但必须更改后端内容这并不是处理设计的好方法。

有人吗？

Answer 1

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

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

   }