html - 菜单“float:bottom”的HTML/CSS定位

我正在创建一个水平菜单，但无法弄清楚如何将所有菜单选项与容器的底部对齐。提供的示例演示了我要执行的操作，但是CSS代码无法按需工作。您能否提供建议以使所有菜单选项卡都位于底部？.example1 {  职位：相对  宽度：32em;  高度：10em；  背景颜色：#fbc;  背景颜色：#fdb;  左边距：自动；  右边距：自动；  padding-bottom：0;}.InventoryMenus {  位置：绝对；  底部：0  背景颜色：＃f00;  填充：0;  左：1em；}.InventoryMenu {  填充：1em；  高度：1em；  宽度：7em;  背景颜色：#fbc;  保证金：0 1em 0 0;  向左飘浮;}.InventoryMenu_Selected {  填充：1em；  高度：2em；  宽度：7em;  背景颜色：#fbc;  保证金：0 1em 0 0;  向左飘浮;} bottom：0方法可在Firefox，Netscape 7 +，IE5 + / Win，Opera 7 +，Konqueror 3，Safari和IE5 / Mac。      一个    两个    三个   (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 在元素上增加边距，以使其向下强制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> (adsbygoogle = window.adsbygoogle || []).push({});