Question

我希望导航栏上的下拉菜单足够宽，其中的文字显示正确，但它会被限制为您悬停在其上的按钮大小以激活它。我希望下拉列表的宽度大于按钮的宽度。

标题在浏览器中显示正常，因此不太确定为什么它在小提琴中未对齐。

＆＃13;

#center-title {
  width: 200px;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#cog {
  width: 20px;
  height: 20px;
  margin-right: 50px;
  margin-top: 15px;
}
#dropdown {
  float: right;
  position: relative;
  display: inline-block;
}
#dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown-content a:hover {
  background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
  display: block;
}
nav {
  background-color: #2b569a;
  width: 100%;
  height: 50px;
  margin-top: 0;
}

＆＃13;

<nav>
  <div class="center">
    <h1 id="center-title"> Blocs </h1>
  </div>
  <div id="dropdown">
    <img id="cog" src="/static/images/cog2.png" alt="" />
    <div id="dropdown-content">
      <a href="profile.html"> Profile </a>
      <a href="settings.html"> Settings </a>
      <a href="logs.html"> Logs </a>
      <a href="emails.html"> Email list </a>
    </div>
  </div>
</nav>

＆＃13;

Answer 1

将right: 0;添加到#dropdown-content。

#center-title {
  width: 200px;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#cog {
  width: 20px;
  height: 20px;
  margin-right: 50px;
  margin-top: 15px;
}
#dropdown {
  float: right;
  position: relative;
  display: inline-block;
}
#dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown-content a:hover {
  background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
  display: block;
}
nav {
  background-color: #2b569a;
  width: 100%;
  height: 50px;
  margin-top: 0;
}

<nav>
  <div class="center">
    <h1 id="center-title"> Blocs </h1>
  </div>
  <div id="dropdown">
    <img id="cog" src="/static/images/cog2.png" alt="" />
    <div id="dropdown-content">
      <a href="profile.html"> Profile </a>
      <a href="settings.html"> Settings </a>
      <a href="logs.html"> Logs </a>
      <a href="emails.html"> Email list </a>
    </div>
  </div>
</nav>

Answer 2

你可以使用display：flex，而不是使用float和display：inline-block for layouts。

检查此代码段

. #center-title {
  width: 200px;
  font-size: 30px;
  color: white;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#cog {
  width: 20px;
  height: 20px;
  margin-right: 50px;
  margin-top: 15px;
}
.center {
  margin: auto;
}
#dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  right: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#dropdown-content a:hover {
  background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
  display: block;
}
nav {
  background-color: #2b569a;
  width: 100%;
  height: 50px;
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  align-content: center;
}

希望有所帮助

Navbar下拉列表未正确显示

2 个答案: