CSS 按钮重叠

Question

我已经查看了与此相关的其他问题，但没有一个解决方案有效。我有一个垂直导航栏，它应该包含按钮，它们也是链接，当它们是默认宽度时它们工作正常但是当我改变大小时所有按钮重叠并且唯一显示的是最后一个。

相关CSS代码:

.navBar{
 background-color: #180639;
 width: 20%;
 color: #B6AFC1;
 text-align: center;
 border: 1px solid #B6AFC1;
 font-family: Century Gothic, sans-serif;
 font-size: 40px;
 left: 0px;
 position: absolute;
 overflow: visible;
}
button.navBar{
  font-size: 40px;
  background-color: #675AFD;
  margin: 10px;
  padding: 10px;
  display: inline-block;
  float: left;
}

相关的 HTML:

<div class="navBar">
      <a href="/"><button type="button" class="navBar">Home</button></a>
      <a href="/chat"><button type="button" class="navBar">Community</button></a>
      <a href="/events"><button type="button" class="navBar">Events</button></a>
      <a href="/prideprom"><button type="button" class="navBar" class="navBar">Pride Prom</button></a>
      <a href="/rights"><button type="button" class="navBar">Resources</button></a>
      <a href="/funds"><button type="button" class="navBar">Fundraising</button></a>
        <a href="/profile/TrueTransRebel"><button type="button" class="navBar">current_user.username</button></a>
        <a rel="nofollow" data-method="delete" href="/users/sign_out"><button type="button" class="navBar" class="navBar">Log Out</button></a>
</div>

我正在使用 Ruby on Rails 编写这篇文章，如果它能帮助任何人提出解决方案的话。对不起，如果代码很乱，我一直在寻找很多解决方案并添加了一堆随机的东西来试图强制它工作。我还应该注意最终目标是让所有按钮排成一列

This is what it looks like presently

Answer 1

我认为导致这里问题的原因是您正在应用 position:absolute两个导航栏的属性 <div> 和 <button>秒。您应该将类​​分开以独立地对每个类应用单独的样式:

HTML:(请注意，我将 <button> 的类名更改为 navBar_button

<div class="navBar">
  <a href="/"><button type="button" class="navBar_button">Home</button></a>
  <a href="/chat"><button type="button" class="navBar_button">Community</button></a>
  <a href="/events"><button type="button" class="navBar_button">Events</button></a>
  <a href="/prideprom"><button type="button" class="navBar_button">Pride Prom</button></a>
  <a href="/rights"><button type="button" class="navBar_button">Resources</button></a>
  <a href="/funds"><button type="button" class="navBar_button">Fundraising</button></a>
  <a href="/profile/TrueTransRebel"><button type="button" class="navBar_button">current_user.username</button></a>
  <a rel="nofollow" data-method="delete" href="/users/sign_out"><button type="button" class="navBar_button" class="navBar">Log Out</button></a>
</div>

和 CSS:

.navBar {
 background-color: #180639;
 width: 20%;
 color: #B6AFC1;
 text-align: center;
 border: 1px solid #B6AFC1;
 font-family: Century Gothic, sans-serif;
 font-size: 40px;
 left: 0px;
 position: absolute;
 overflow: visible;
}
.navBar_button {
  font-size: 40px;
  background-color: #675AFD;
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

另请记住，您不需要 float:left如果你有 display:inline-block对于按钮，您可以使用一个或另一个。还有你的navBar div 只有 20% 的宽度，所以这些元素基本上会堆叠在一起。如果将该宽度扩展到 100%，它们将沿着顶部彼此相邻。