css - 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: rightto实现了您所追求的布局#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 演示