首页 文章

菜单的“HTML / CSS”定位“float：bottom”

提问于
浏览 次
1

我正在创建一个水平菜单，我无法弄清楚如何将所有菜单选项对齐到容器的底部 . 提供了一个示例来演示我正在尝试做什么，但CSS代码不能按需工作 . 您能提供建议让所有菜单选项卡都位于底部吗？

<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>
html css tabs menu

1 回答

  • 1

    为元素添加边距，以便强制下降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>
    回复于

相关问题