如何将导航栏下拉列表与导航栏链接的其余部分对齐?

冻结

我在将导航栏的下拉列表(“链接”)与导航栏上的其余链接对齐时遇到了一些麻烦。

这是我的第一个项目之一,所以我有点困惑我应该在哪里编辑我当前的代码,以便正确排列。任何帮助???

这是问题的屏幕截图: 在此处输入图片说明

在此处输入图片说明 显然,我实际上期望/尝试做的是将“链接”下拉按钮与导航栏链接的其余部分对齐。

如果有人可以提供帮助,将不胜感激!

/* Navbar Container */

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Raleway, sans-serif;
}


/* Navbar Links */

.navbar a {
  display: inline-block;
  list-style-type: none;
  float: none;
  font-size: 1rem;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Links Container */

.links {
  display: inline-block;
  float: none;
  overflow: hidden;
}


/* Links Button */

.links .linksbutton {
  font-size: 1rem;
  font-family: inherit;
  background-color: inherit;
  color: white;
  border: none;
  outline: none;
  margin: 0;
  padding: 14px 16px;
}


/* Hover Color */

.navbar a:hover,
.links:hover .linksbutton {
  background-color: red;
}


/* Dropdown Content */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Dropdown Links */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Dropdown Links Hover Color */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show Dropdown Menu on Hover */

.links:hover .dropdown-content {
  display: block;
}
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#about-us">About Us</a>
  <a href="#music">Music</a>
  <a href="#discography">Discography</a>
  <div class="links">
    <button class="linksbutton">Links</button>
    <div class="dropdown-content">
      <a href="https://tru-thoughts.co.uk/artists/quantic/" target="_blank" rel="noopener noreferrer">Tru Thoughts</a>
      <a href="https://www.facebook.com/quanticmusic/" target="_blank" rel="noopener noreferrer">Facebook</a>
      <a href="https://www.instagram.com/quanticmusic/?hl=en" target="_blank" rel="noopener noreferrer">Instagram</a>
      <a href="https://en.wikipedia.org/wiki/Will_Holland" target="_blank" rel="noopener noreferrer">Wikipedia</a>
      <a href="https://quanticmusic.bandcamp.com/" target="_blank" rel="noopener noreferrer"> Bandcamp</a>
      <a href="https://www.discogs.com/artist/161443-Will-Holland" target="_blank" rel="noopener noreferrer">Discogs</a>
    </div>
  </div>
</div>

阿迪亚·斯里瓦斯特

您可以将导航栏中的内容放入flexbox并垂直居中。

试试这个:

.navbar {
  display: flex;
  align-items: center;
}

希望能帮助到你!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使导航栏与页面的其余部分重叠?

来自分类Dev

在Bootstrap中,如何将导航栏链接右对齐?

来自分类Dev

如何将导航栏链接移至导航栏的右侧?

来自分类Dev

如何将导航栏与CSS对齐

来自分类Dev

如何将徽标与导航栏对齐

来自分类Dev

如何防止引导导航栏与页面的其余部分一起滚动

来自分类Dev

如何防止引导导航栏与页面的其余部分一起滚动

来自分类Dev

如何将导航菜单与搜索栏和下拉选项卡对齐?

来自分类Dev

如何垂直对齐导航栏的链接?

来自分类Dev

如何将徽标右侧的Wordpress导航栏对齐?

来自分类Dev

如何将导航栏操作链接修复到右侧

来自分类Dev

如何创建一个滑动侧导航栏,在打开时使网站的其余部分变暗?

来自分类Dev

固定导航栏在向下滚动时被页面的其余部分覆盖

来自分类Dev

将下拉菜单项与站点菜单的其余部分对齐时出现问题

来自分类Dev

如何将导航栏居中?

来自分类Dev

如何将导航栏项目居中?

来自分类Dev

如何使导航栏与中心对齐

来自分类Dev

将 Bootstrap 4 导航栏链接对齐到底部

来自分类Dev

如何将导航栏的导航项居中?

来自分类Dev

如何在导航栏中将链接右侧对齐

来自分类Dev

如何在一行中对齐导航栏链接

来自分类Dev

如何将搜索栏添加到导航栏

来自分类Dev

如何将您的Foundation导航栏/顶部栏居中

来自分类Dev

底部导航栏的图像/链接对齐问题

来自分类Dev

如何将导航栏中的搜索表单与引导网格对齐?

来自分类Dev

如何将中央导航栏仅与bootstrap 4.5.3对齐?

来自分类Dev

如何将导航栏对齐到html页面的右侧?

来自分类Dev

如何将顶部导航栏与左上角完全对齐?

来自分类Dev

如何使导航栏下拉列表浮于所有元素之上?

Related 相关文章

  1. 1

    如何使导航栏与页面的其余部分重叠?

  2. 2

    在Bootstrap中,如何将导航栏链接右对齐?

  3. 3

    如何将导航栏链接移至导航栏的右侧?

  4. 4

    如何将导航栏与CSS对齐

  5. 5

    如何将徽标与导航栏对齐

  6. 6

    如何防止引导导航栏与页面的其余部分一起滚动

  7. 7

    如何防止引导导航栏与页面的其余部分一起滚动

  8. 8

    如何将导航菜单与搜索栏和下拉选项卡对齐?

  9. 9

    如何垂直对齐导航栏的链接?

  10. 10

    如何将徽标右侧的Wordpress导航栏对齐?

  11. 11

    如何将导航栏操作链接修复到右侧

  12. 12

    如何创建一个滑动侧导航栏,在打开时使网站的其余部分变暗?

  13. 13

    固定导航栏在向下滚动时被页面的其余部分覆盖

  14. 14

    将下拉菜单项与站点菜单的其余部分对齐时出现问题

  15. 15

    如何将导航栏居中?

  16. 16

    如何将导航栏项目居中?

  17. 17

    如何使导航栏与中心对齐

  18. 18

    将 Bootstrap 4 导航栏链接对齐到底部

  19. 19

    如何将导航栏的导航项居中?

  20. 20

    如何在导航栏中将链接右侧对齐

  21. 21

    如何在一行中对齐导航栏链接

  22. 22

    如何将搜索栏添加到导航栏

  23. 23

    如何将您的Foundation导航栏/顶部栏居中

  24. 24

    底部导航栏的图像/链接对齐问题

  25. 25

    如何将导航栏中的搜索表单与引导网格对齐?

  26. 26

    如何将中央导航栏仅与bootstrap 4.5.3对齐?

  27. 27

    如何将导航栏对齐到html页面的右侧?

  28. 28

    如何将顶部导航栏与左上角完全对齐?

  29. 29

    如何使导航栏下拉列表浮于所有元素之上?

热门标签

归档