Nav float right

我試圖在頁面的左側和右側創建一個包含選項的兩部分導航欄（它是我的頁面的一個視覺主題，應該有一個帶葉子的樹的分支是按鈕）。Nav float right

目前，我有他們的HTML編碼是這樣的（這2周的只是佔位符現在）：

<nav> 
<img src="images/nav-menu-left-temp.png" alt=""/> 
<img id="navright" src="images/nav-menu-right-temp.png" alt=""/> 
</nav>

這裏是我已經應用了CSS。

nav 
{ 
    position: fixed; 
} 
#navright 
{ 
    float: right; 
    width: auto; 
}

我想他們兩人都固定位置到頁面的頂部，但左側導航欄我需要它也固定在頁面（如果可能的右側，所以它看起來像從屏幕外伸出的分支）。我希望浮動：右邊會在固定的幫助下完成這項工作，但瀏覽器邊緣和條形圖像之間似乎存在左邊緣。頁面寬度當前設置爲自動。我曾希望它可以讓它正確地擴展。

截圖的我有什麼： http://i723.photobucket.com/albums/ww238/cerberosg/nav1_zpsumvws3h7.jpg

我想要實現： http://i723.photobucket.com/albums/ww238/cerberosg/nav2_zpsxpqonads.jpg

來源

2015-12-13 camokid

我曾經有一個這樣的導航欄，這是我從CSS和HTML remeber ：

<nav> 
    <ul class = "pull-left"> 
     <li><img src="images/nav-menu-left-temp.png" alt=""/></li> 
    </ul> 

    <ul class = "pull-right"> 
     <li><img id="navright" src="images/nav-menu-right-temp.png" alt=""/></li> 
    </ul> 
</nav>

CSS：

nav { 
    display: inline; 
}

希望這有助於！

來源

2015-12-13 18:12:52 FlipFloop

呀，你使用自舉類。這個問題並沒有說明涉及引導程序。 –

哦，對不起！我沒有任何鏈接引導，雖然 – FlipFloop

我試過這個解決方案，但它不適合我。可能是因爲我的結局出了問題。我最終使用了cale_b的解決方案，它對我來說非常整齊，但是感謝您的輸入！ – camokid

我懷疑問題是nav元素不是全寬度。嘗試是有點與nav元件佈局更加明確，使用一些樣式像這樣：

nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

你是在正確的軌道上。我已經把小提琴給你看/玩：這裏

http://jsfiddle.net/7qxrsrrw/

來源

2015-12-13 18:16:18

是的，它做到了，謝謝！ – camokid

回答

相關問題