菜單的HTML/CSS定位「float：bottom」

我正在創建一個水平菜單，我無法弄清楚如何將所有菜單選項對齊到容器的底部。提供了一個示例來演示我正在嘗試做什麼，但是CSS代碼不能根據需要運行。你能提供建議讓所有的菜單選項卡坐在底部嗎？菜單的HTML/CSS定位「float：bottom」

 
<style> 
.example1 { 
    position: relative; 
    width: 32em; 
    height: 10em; 
    background-color: #fbc; 
    background-color: #fdb; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 0; 
} 
.InventoryMenus { 
    position: absolute; 
    bottom: 0; 
    background-color: #f00; 
    padding:0; 
    left: 1em; 
} 
.InventoryMenu { 
    padding: 1em; 
    height: 1em; 
    width: 7em; 
    background-color: #fbc; 
    margin: 0 1em 0 0; 
    float: left; 
} 
.InventoryMenu_Selected { 
    padding: 1em; 
    height: 2em; 
    width: 7em; 
    background-color: #fbc; 
    margin: 0 1em 0 0; 
    float: left; 
} 
</style> 


<div id="example1" class="example1"><p>The bottom:0 method works in Firefox, Netscape 7+, IE5+/Win, 
Opera 7+, Konqueror 3, Safari, and IE5/Mac.</p> 
    <div class="InventoryMenus"> 

    <div class="InventoryMenu_Selected">one</div> 
    <div class="InventoryMenu">two</div> 
    <div class="InventoryMenu">three</div> 
    </div> 
</div>

來源

2009-10-20 E Net Arch

這是純CSS的設計問題，爲什麼不試着問上http://doctype.com/？ – 2009-10-20 00:55:30

添加保證金的元素，使其被迫1EM下來：

<style> 
.example1 { 
    position: relative; 
    width: 32em; 
    height: 10em; 
    background-color: #0f0; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 0; 
} 
.InventoryMenus { 
    position: absolute; 
    bottom: 0; 
    background-color: #f00; 
    padding:0; 
    left: 1em; 
} 
.InventoryMenu { 
    padding: 1em; 
    height: 1em; 
    width: 7em; 
    background-color: #00f; 
    /*This is where the magic happens*/ 
    margin: 1em 1em 0 0; 
    /*Originally it was margin: 0 1em 0 0;*/ 
    float: left; 
} 
.InventoryMenu_Selected { 
    padding: 1em; 
    height: 2em; 
    width: 7em; 
    background-color: #0ff; 
    margin: 0 1em 0 0; 
    float: left; 
} 
</style> 


<div id="example1" class="example1"><p>The bottom:0 method works in Firefox, Netscape 7+, IE5+/Win, 
Opera 7+, Konqueror 3, Safari, and IE5/Mac.</p> 
    <div class="InventoryMenus"> 

    <div class="InventoryMenu_Selected">one</div> 
    <div class="InventoryMenu">two</div> 
    <div class="InventoryMenu">three</div> 
    </div> 
</div>

來源

2009-10-20 00:44:39 Marius

菜單的HTML/CSS定位「float：bottom」

回答

相關問題