如何在底部放置一個菜單？

我想在容器的底部區域移動菜單在下面的圖片

該代碼的CSS菜單：

.main-navigation { 
    display: inline-block; 
    float: left; 
    width: 75%; 
}

我試圖做到這一點position:absolute; bottom:0px;但無法正常工作。

我發現了一些例如這裏的網站上，我設法實現

我可以坐下菜單margin-top: X value但沒有其他方法？

你能幫我解決這個問題嗎？

在此先感謝！

如果你做出的jsfiddle說明您遇到的問題，很容易解決和修正錯誤。 – NateW 2015-03-02 19:09:13

如果您將position:absolute指定給元素，則將其定位到最近的具有位置的父親或body（如果未定位父親）。使用position:relative對您試圖給出的元素的父親是安全的position:absolute。

因此，在下面的代碼中，我將position:relative設置爲要嘗試定位的元素的父級。因此，所需元素相對於.site-header定位。

我希望這可以幫助你從長遠來看。

.site-header{ 
    position:relative; 
} 

#site-navigation{ 
    position: absolute; 
    bottom: 0; 
}

2015-03-02 19:06:59 roshan

@ user1789573如果您製作小提琴，或者使用Chrome開發工具嘗試，您會發現羅山是正確的。 – gibberish 2015-03-02 19:13:53

@ user1789573如果答案錯誤，請解釋如何評論或不評論。說：「這不會奏效......你錯了。」不以任何方式建設性或有幫助。 – CalebB 2015-03-02 19:14:46

-4

只需將HTML代碼片段放在HTML文檔的底部即可。

2015-03-02 19:04:53 user1789573

這是最好和最簡單的解決方案。 – user1789573 2015-03-02 19:11:29

我懷疑你主要是因爲你的評論而被低估，而不是因爲你試圖解決問題。 *保持解決方案的來臨，但保持評論的尊重 - 我們都在通過這種方法學習/改進。* – gibberish 2015-03-02 19:16:51

不是。只是不要將CSS應用於特定的代碼片段。完成！ – user1789573 2015-03-02 19:18:09

您可以添加padding-top，例如

.main-navigation { 
    float: left; 
    width: 75%; 
    padding-top: 70px; 
}

inline-block是不必要的

2015-03-02 19:08:58 marsh

回答