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，並刪除了.menlink的margin屬性。請參閱變化和下面的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