菜單“浮動：底部”的 HTML/CSS 定位

Question

我正在創建一個水平菜單，但我不知道如何將所有菜單選項對齊到容器底部。 提供了一個示例來演示我正在嘗試做什么，但 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>

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

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