css выравнивающее меню вправо

Question

Это, вероятно, простой, но я не могу понять, что это за жизнь. Я создаю мобильное меню, и я пытаюсь заставить его сидеть справа от экрана. (панель поиска и значок меню)

Моя проблема в том, что если я плаваю вправо, фон исчезает, и если я выравниваю текст, то текст-отступ, который у меня есть по ссылке, решает показать.

Мой 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> 

и пример можно увидеть здесь на jsfiddle

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

Некоторая помощь будет высоко ценится!

Answer 1

Я достиг вашего макета, добавив width :100% и float: right в #subHeader. Я также добавил float: right в .mobileMenu li и удалил margin атрибуты .menlink. Пожалуйста, смотрите ниже изменений и 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