css右对齐菜单

这可能是一个简单的问题，但我似乎一辈子都搞不懂。我正在制作一个移动菜单，并试图让它位于屏幕的右侧。（搜索栏和菜单图标）

我的问题是，如果我将其向右浮动，背景就会消失，如果我将其文本对齐，链接上的文本缩进就会显示出来

我的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>

在JSFIDLE可以看到一个例子

---

如果您能帮上忙，我们将不胜感激

我通过将

宽度：100%

和

浮动：右

添加到

#副标题

，实现了您想要的布局。我还将

float:right

添加到

.mobileMenu li

中，并删除了

.menlink

的

margin

属性。请参阅下面的更改和JSFIDLE

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

---

非常感谢您的帮助！