html - 如何在CSS中的按钮底部设置菜单位置

Question

我正在尝试设置通过单击按钮打开的菜单的位置。 我需要菜单底部与按钮底部位于同一水平线上。

我的代码示例在这个 Fiddle 中有错误

我正在尝试做同样的事情 example .这适用于一个按钮，但不适用于 2 个按钮。

Answer 1

请参阅此 jsfiddle 作为工作示例，如果需要，请选择已接受的答案。

twoBoxMenu Example

我所做的是取消类 uiBarButton 中的commeted position:absolute，然后为每个框添加包装器类。并为该包装器提供以下代码:

.wrapper{
  position:relative;
  width: 100px;
  height: 50px;
  border: black;
  padding: 0px;
  margin: 5px 0;
}

它的作用是，当您在绝对位置放置某些东西时，您可以通过 DOM 中 super 元素的相对位置来控制它的初始位置。这正是我所做的，正如您所看到的包装类具有相对位置并且不允许超出您的盒子，它使它们分开。我为 wrapper div 添加了一些边距，这样它们就可以按照你的意愿分开。

此外，在 uiMenu 类中，我已将 bottom 的值更改为 0，因此任何元素都将从 0 开始，绝对位置

.uiMenu {
 margin: 0;
 padding: 0;
 border: 1px solid #18BECD;
 display: none;
 position: absolute; 
 bottom:0; }