navbar 相关问题

我正在尝试创建一个网站，但找不到中间两个选项（“图库”和“关于”）无法正常工作的原因。所讨论的问题：我正在尝试创建一个网站，但找不到中间两个选项（“图库”和“关于”）无法正常工作的原因。所讨论的问题： <!DOCTYPE html> <html> <head>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Whisper&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <header> <div class="header"> <div class="inner_header"> <div class="logo_container"> <h1>Céramique & Porcelaine</h1> </div> </div> </div> </header> <body> <div class="menu_navbar"> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html> CSS *{ margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } body{ background-color: #101010; background-size: cover; background-position: center; font-family: sans-serif; } .header{ width: 100%; height: 200px; display: block; background-color: #101010; } .inner_header{ width: 1000px; height: 100%; display: block; margin: 0 auto; background-color: red; } .logo_container{ height: 100%; display: table; float: right; position: absolute; right: 40%; } .logo_container h1{ color: bisque; font-family: "Whisper", cursive; font-weight: 400; font-style: normal; } .menu_navbar{ background: blue; text-align: center; } .menu_navbar ul{ display: inline-flex; list-style: none; color: bisque; text-align: center; } .menu_navbar ul li { width: 120px; margin: 15px; padding: 15px; } .menu_navbar ul li a{ text-decoration: none; color: bisque; } 当我删除 HTML 文件夹中的标头部分时，我意识到导航栏可以工作，但是当我把它放回去时，又出现了同样的问题。我希望导航栏中的所有选项都能正常工作。谢谢！通常，当出现此问题时，某些东西位于您尝试单击的链接的“前面”。将其视为一堵（通常）看不见的墙，您的鼠标无法穿过它到达链接。我在沙盒中重新创建了 HTML 和 CSS，然后转到 Google Chrome 中的“检查”（右键单击一个元素，转到“检查”）。然后，Chrome 会突出显示您在 DOM 中右键单击的元素。当我右键单击您的“图库”或“关于”链接时，Google Chrome 会突出显示： <div class="logo_container"> <h1>Céramique & Porcelaine</h1> </div> 这不是图库或关于链接。但是页面顶部的元素：徽标。当您将鼠标悬停在“检查”窗口中的某个元素上时，Chrome 显示的另一件事是该元素所在的位置以及它占用的空间。在此图像中，我选择了徽标容器，Chrome 以浅蓝色显示它在页面上占用的空间。如您所见，浅蓝色矩形与“图库”和“关于”按钮重叠。但不是主页或联系方式。这就是为什么这些按钮仍然有效的原因；他们面前什么都没有。要解决此问题，请将徽标容器的高度更改为更小的值，例如 50px。每当您处理此类问题时，在您有经验之前：进入 Chrome 的开发工具，通过这些工具直观地检查您的页面，找出问题所在。

html css web header navbar

回答 1 投票 0

导航栏中左右对齐菜单项的问题

我有以下 html，它显示了我想要的内容，但不是我想要的位置;-)。我希望“文件”下拉列表位于左侧，其余下拉列表位于右侧。我已将我的 css 文件包含为...

html css bootstrap-4 navbar

回答 1 投票 0

如何在 Bootstrap 导航栏中嵌入视频？

我有一个使用 Bootstrap 创建的简单菜单。左边是文字，右边是视频。我想实现视频延伸到页面顶部，并带有

html css bootstrap-4 bootstrap-5 navbar

回答 1 投票 0

为什么我的导航栏显示为堆叠式而不是水平式？/如何才能将所有页面内容包含在不可见边框中？

所以，我试图创建一个只有两个链接的“导航栏”。我一直在尝试使用 W3schools 示例来确定执行此操作的最佳方法，但我不确定我使用了最佳方法

html css navbar padding margin

回答 1 投票 0

我怎样才能让这个下拉菜单占据整个页面宽度？

我有这个 Bootstrap 5 megamenu，我想让所有下拉菜单与所有页面宽度一样长，并且都具有相同的位置。喜欢这个页面。如何使下拉菜单变大？哪个

html css bootstrap-5 navbar

回答 1 投票 0

</desc> <question vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="87f3e6eeebf0eee9e3e4f4f4c7b5a9b7a9b7">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-slate-600"> <nav class="bg-white text-black h-12 flex items-center justify-between px-4"> <div class="text-lg font-semibold">ABC Enterprises</div> <ul class="flex items-center space-x-4"> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Solutions</a> <div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG & Sustainability Reporting & Management</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Carbon Accounting & GHG Measurement</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Sustainable Procurement & Sourcing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Portfolio Management For Investors</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Consulting</a> </div> </li> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Industries</a> <div class="dropdown-content absolute bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Manufacturing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Agri-business & Forestry</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Retail & Hospitality</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Health & Education</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Infrastructure</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Financial Institutions & Funds</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Real Estate & Construction</a> </div> </li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Contact Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">About Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Sign In</a></li> </ul> </nav> </body> </html> </code></pre> </div> </div> <p></p> <p>对于大多数人来说，我面临的问题很容易，我在过去的 6-7 个小时里都被困在上面。所以我也尝试了 group-hover:block ，但当我将鼠标悬停在解决方案和资源上时，它仍然没有显示下拉菜单，请帮助我，这很紧急！！！</p> </question> <answer tick="false" vote="0"> <p>2.0.0版本中没有任何类定义<pre><code>group-hover:block</code></pre>，您需要在Tailwind上升级到新版本。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-slate-600"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="f08491999c87999e94938383b0c2dec0dec0">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-slate-600"> <nav class="bg-white text-black h-12 flex items-center justify-between px-4"> <div class="text-lg font-semibold">ABC Enterprises</div> <ul class="flex items-center space-x-4"> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Solutions</a> <div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG & Sustainability Reporting & Management</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Carbon Accounting & GHG Measurement</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Sustainable Procurement & Sourcing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Portfolio Management For Investors</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Consulting</a> </div> </li> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Industries</a> <div class="dropdown-content absolute bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 hidden group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Manufacturing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Agri-business & Forestry</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Retail & Hospitality</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Health & Education</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Infrastructure</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Financial Institutions & Funds</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Real Estate & Construction</a> </div> </li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Contact Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">About Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Sign In</a></li> </ul> </nav> </body> </html> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

html css header tailwind-css navbar

回答 0 投票 0

样式未应用于我的导航栏，不确定为什么

我是一名初学者，目前正在为 freeCodeCamp 作业制作作品集。我打算让我的导航栏元素水平显示，并具有特定的字体和样式元素，但这些都不是

html css navbar nav

回答 2 投票 0

我的“粘性”在找到容器时不起作用

当我滚动到愿景任务部分时，粘滞键不起作用。我需要帮助，身体里也有更多的容器。我尝试了不同的位置，但无法使其发挥作用。我不知道怎么...

html css navbar sticky

回答 1 投票 0

导航栏切换器在展开时不会变成“X”

对于contex，我使用HTML和CSS（通过CDN连接的链接/脚本标签使用Bootstrap 5）来创建前端响应式静态网站。我的问题是，当切换器展开时，它......