css aligner le menu vers la droite

Question

Ceci est probablement un simple, mais je n'arrive pas à le comprendre pour la vie de moi. Je fais un menu mobile et j'essaie de le faire s'asseoir à droite de l'écran. (la barre de recherche et l'icône de menu)

Mon problème est que si je le fais flotter vers la droite, l'arrière-plan disparaît et si je l'aligne, le retrait de texte que j'ai sur un lien décide de s'afficher.

Mon html

<div id="subHeader"> 
<ul class="mobileMenu"> 
    <li> 
     <form> 
      <input type="text" name="search" id="search" /> 
      <input type="submit" value="Search" class="sub" /> 
     </form> 
    </li> 
    <li class="menLink"><a href="#">MobileMenu</a></li> 
</ul>  
</div> 

et un exemple peut être vu ici à jsFiddle

http://jsfiddle.net/zazvorniki/9SWbs/1/

Une aide serait grandement appréciée!

Answer 1

J'ai atteint la mise en page que vous recherchez en ajoutant width :100% et float: right à #subHeader. J'ai également ajouté float: right à .mobileMenu li et supprimé les attributs margin de .menlink. S'il vous plaît voir ci-dessous les changements et jsFiddle ...

#subHeader{ 
    background: #c1c1ab; 
    width: 100%; 
    color: #1a1a15; 
    float: right; 
} 

.mobileMenu li{ 
    display: inline-block; 
    float: right; 
    font: bold 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
    margin-right: 4px; 
} 

.menLink { 
    background:url("http://tinyurl.com/kgd7ayt") no-repeat; 
    height: 3em; 
    width: 3em; 
} 

.menLink a { 
    text-indent:-9999px; 
    display:block; 
    height: 3em; 
    width: 3em; 
} 

jsfiddle demo