Comment faire ceci float/aligner sans div supplémentaire?

Question

J'essaie d'obtenir une barre de navigation qui se compose d'un nav avec une liste non ordonnée pour l'aligner sur le côté droit de la largeur de la page. La navigation lui-même doit couvrir toute la largeur (il est une barre noire sur la page entière), mais les liens lui-même devrait être aligné à droite de la largeur du contenu, comme ceci:

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

Le code HTML je:

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

    } 

Mais bien sûr, qui est sur le côté gauche de la page, et je ne peux pas sembler l'obtenir à droite sans ajouter un élément div supplémentaire ... la seule option est de flotter le <li> a raison, mais cela signifierait que ma navigation est dans l'ordre inverse et je ne veux vraiment pas ... C'est une liste de pages générées automatiquement dans une installation wordpress, donc je pourrais alors ordonner les pages inversement dans le panneau d'administration mais avoir à modifier les choses backend n'est pas vraiment un bon moyen de gérer un design.

Quelqu'un?

Answer 1

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

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

    }