菜单“浮动：底部”的 HTML/CSS 定位答案

【问题标题】：HTML/CSS positioning for Menus “float: bottom”菜单“浮动：底部”的 HTML/CSS 定位
【发布时间】：2010-12-08 04:33:22
【问题描述】：

我正在创建一个水平菜单，但我不知道如何将所有菜单选项与容器底部对齐。提供了一个示例来演示我正在尝试做的事情，但是 CSS 代码不能按需要工作。您能否提供一些建议以使所有菜单选项卡都位于底部？

.example1 { 位置：相对；宽度：32em；高度：10em；背景颜色：#fbc；背景颜色：#fdb；左边距：自动；边距右：自动；填充底部：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。

一个

两个

三个

【问题讨论】：

标签： html css tabs menu

【解决方案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>

【讨论】：

【解决方案2】：

是的，您可以这样做。移除所有菜单的浮动并使用display: inline-block 并设置vertical-align: bottom 固定到底部。

.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;
  display: inline-block;
  vertical-align: bottom;
}
.InventoryMenu_Selected {
  padding: 1em;
  height: 2em;
  width: 7em;
  background-color: #fbc;
  margin: 0 1em 0 0;
  display: inline-block;
}

<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>

或者为父级设置display:flex并设置align-items: end

.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;
  display: flex;
  align-items: end;
}
.InventoryMenu {
  padding: 1em;
  height: 1em;
  width: 7em;
  background-color: #fbc;
  margin: 0 1em 0 0;
  
}
.InventoryMenu_Selected {
  padding: 1em;
  height: 2em;
  width: 7em;
  background-color: #fbc;
  margin: 0 1em 0 0;
  
}

<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>

【讨论】：