Question

我的页面侧面有一个固定的导航栏。我想在导航栏的底部有一个菜单，在右侧有一个锚标签形式的按钮。所以我使用bottom: 0菜单的绝对定位。这完全没问题。但是当我想要将按钮置于绝对位置时，菜单的高度设置为0，按钮似乎低于整个导航栏。

HTML和CSS：

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 200px;
  border:solid;
}

.menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid;
}

.btn {
  position: absolute;
  right: 0;
  border: solid;
}

<div class="fixed">
  <div class="menu">
    <a class="btn">
        Hello
    </a>
  </div>
</div>

float: right也不起作用，按此方法按钮仍在左侧。如何在菜单右侧放置按钮？

Answer 1

为什么不使用text-align:right？

＆＃13;

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 200px;
  border:solid;
}

.menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid;
  text-align:right;
}

＆＃13;

<div class="fixed">
  <div class="menu">
    <a class="btn">
        Hello
    </a>
  </div>
</div>

＆＃13;

Answer 2

我认为没有理由为什么你的按钮显示在左侧float:right，可能还有其他规则？

此外，由于浮动元素不在流程中，如果您希望.menu适应链接的高度，则可以应用clearfix：

＆＃13;

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 200px;
  border: 1px solid red;
}

.menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid blue;
}

.btn {
  float: right;
  border: 1px solid green;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

＆＃13;

<div class="fixed">
  <div class="menu">
    <a class="btn">
        Hello
    </a>
    <div class="clearfix"></div>
  </div>
</div>

＆＃13;

CSS：绝对父级的位置元素

2 个答案: