Question

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

相关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> s 。您应该将这些类分开，以便独立地为每个类应用单独的样式：

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％，它们将在顶部彼此相邻。

CSS按钮重叠

1 个答案: