How to do this float/align without an extra div?

I'm trying to get a navigation bar that consists of a nav with an unordered list in it to align to the right side of the page's width. The nav itself should span the entire width (it's a black bar across the entire page) but the links itself should be aligned to the right of the contents width, like so:

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

The HTML I have:

<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;

   }

But of course that's on the left side of the page, and I can't seem to get it to the right without adding an extra div element... The only option is to float the <li>'s right, but that would mean my navigation is in reverse order and I really don't want that... It's an auto gener开发者_高级运维ated list of pages in a wordpress install, so I could then order the pages reversely in the admin panel but having to alter backend stuff is not really a good way to handle a design.

Anyone?

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

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

   }