對齊到固定元素的右邊

我的頁面左側有一個導航欄。這個欄是固定的，以便它可以與頁面一起滾動。對齊到固定元素的右邊

現在我想讓我的內容與其右側對齊，但我不想明確指定導航欄或頁面內容的寬度/邊距，以便導航欄可以展開以適應其文本。

我怎麼能用CSS做這樣的事情？

我使用position: fixed對準我的導航欄，如下所示：

#navbar, 
#navbar > ul, 
#navbar > ul > li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#navbar > ul { 
    position: fixed; 
    float: none; 
    background: #fff; 
} 
#navbar > ul > li { 
    float: none; 
    min-height: 1px; 
    line-height: 1em; 
    vertical-align: middle; 
}

下面是HTML：

<div id='navbar'> 
    <ul> 
     <li><a class="nav" href='#home'><span>Home</span></a></li> 
     <li><a class="nav" href='#articles'><span>Articles</span></a></li> 
     <li><a class="nav" href='#about'><span>About</span></a></li> 
    </ul> 
</div>

來源

2013-09-29 Andrew Sun

請添加一些代碼 –

您是否嘗試過text-align：right; ？ – Danield

什麼？不，我的意思是我希望頁面上的其他元素將導航欄視爲未固定，以便它們對齊導航欄而不是頁面左側。 –

演示：http://codepen.io/theskumar/full/slgfi（調整瀏覽器來查看效果）
代碼： http://codepen.io/theskumar/pen/slgfi

更多幫助
您應該有兩個寬度爲％的主級容器。一個定位絕對可以滾動和其他定位固定。

現在，您可以根據需要將內容放入那些容器中。他們將適合並調整大小。

來源

2013-09-29 09:57:00 Saurabh

我以前試過，是否有任何方式來做到這一點，而不指定任一元素的寬度？ –

沒有寬度是什麼意思？你可以解釋嗎？如果你刪除'寬度'它將採用'.containers'的自然寬度，但我不會建議。重要的是'absolute'和'fixed'屬性的寬度是可選的。任何圖解或其他解釋。 – Saurabh

問題是，導航欄應該伸展以適應其中的文本，而不是始終佔用頁面的固定百分比。實際上，我正在尋找domdev的功能，但左側邊欄滾動頁面而不是保留在頂部。 –

如果您不想指定任何一個容器的寬度，您可以使用float: left;和display: block;，然後通過jQuery動態設置其中一個容器的最大寬度。

看看我的小提琴：http://jsfiddle.net/ZxQLV/

側邊欄基本上可以具有任意寬度和內容DIV會適應它。嘗試改變兩者的內容並再次運行小提琴。

來源

2013-09-29 10:36:10

它的工作原理，但我需要容器滾動頁面，這就是爲什麼我使用'position：fixed'。 –

對齊到固定元素的右邊

回答

相關問題