`<nav>`元素是新的HTML5元素，它定义了一段导航链接。
好的，在我的网站中，我有第二个导航栏来放置类别。我有 9 个类别，其中 2 个类别只有一行，因此悬停仅悬停在该行而不是该块上。 可以将鼠标悬停在块上...
我一直想制作一个不会拉伸整个页面的水平导航栏。最终遵循了有关如何制作与我的想法非常相似的导航栏的教程（https://cssde...
我正在使用 HTML5 元素，因此我使用 标签制作导航栏。我想给 一个顶部边框和底部边框，但代码不起作用。我做了什么... 我正在使用 HTML5 元素，因此我使用 <nav> 标签制作导航栏。我想给 <nav> 一个顶部边框和底部边框，但代码不起作用。我做错了什么？ 这是我的 HTML 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Home</title> <link href="css/fphmain.css" rel="stylesheet" type="text/css"> </head> <body> <header> </header> <div id="content"> <nav> <ul> <li><a href="about.html">About</a></li> <li><a href="books.html">Books</a></li> <li><a href="tracts.html">Tracts</a></li> <li><a href="publications.html">Publications</a></li> <li><a href="order.html">Order</a></li> <li><a href="donate.html">Donate</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> </body> </html> 这是我的CSS @charset "utf-8"; /* CSS Document */ #content { width:980px; margin-right:auto; margin-left:auto; } nav { width:100%; } nav ul { margin:0; padding:0; } nav ul li { float: left; list-style-type: none; padding: 3px 5px 3px 5px; } nav ul li a { text-decoration:none; color:#000; } 你没有添加任何边框CSS，里面的浮动也没有被清除： nav { border-top: 1px solid blue; border-bottom: 1px solid red; } nav:after { content: ""; display: block; clear: both; } 样式表中没有 CSS 可以在 nav 元素上创建边框。 您需要添加具有 border-bottom 和 border-top 样式规则的 CSS 来创建此类边框。例如，如果您想要 nav 元素的顶部和底部有一个像素厚的黑色边框，那么您可以应用如下的样式规则： nav { border-top: 1px solid black; /* in place of the word "black", you can use #000000 or rgb(0,0,0) */ border-bottom: 1px solid black; } 如果您不希望其他元素紧邻 nav（换句话说，如果您希望所有其他元素位于其上方或下方），那么您可以将 display: block; 规则应用于导航，与 clear: both;。 即使将边框应用于 nav，您也无法正确看到边框，因为由于浮动列表项，您需要在中殿元素上进行清除修复。查看 Nicolas Gallagher 的 microclearfix。 .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } 如果您没有给导航高度，您可以使用：overflow:hidden;。 它将包裹任何浮动子元素，并将相邻的浮动元素放在一边。 只需使用：nav {overflow:hidden;border-top:solid;border-bottom:solid;}， 块元素不需要 width:100%;。 您可以添加 边框：1px 实心 #000006;
我只是在这里学习html / css。现在我正在尝试使用响应式设计设置我的第一个网页。当视口为红色时，我已将其他所有内容设置为减少为单列布局...
嗨，我需要将我的页面从 bootstrap 4.6.0 升级到 bootstrap 5.x.x 一旦我将 data-toggle 升级到 data-bs-toggle，活动选项卡就会停止工作，即第一个选项卡始终保持活动状态，无论如何
我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏： &... 我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏： <nav class="navbar"> <a href="#About">About me</a> <a href="#Education">Education</a> <a href="#Portfolio">Portfolio</a> <a href="#Contact">Contact</a> </nav> 我尝试过在导航标签内部使用或不使用 div 容器。 这是相应的CSS： nav { text-align: center; position: fixed; top: 0; lef: 0; right: 0; height: 35px; padding-top: 15px; box-shadow: 0px 0px 8px 0px; -webkit-box-shadow: 0px 0px 8px 0px; -moz-box-shadow: 0px 0px 8px 0px; background-color: gray; width: 100%; z-index: 100; } 我也尝试过不使用 z-index: 100; 如果有人知道我缺少什么，或者如果我需要添加其他内容，我有兴趣看看它是什么以及我可以在哪里阅读它，以便我得到它。 谢谢:) 你的位置：固定。还有一个错字“左” 这里的每个人都帮助了我，因为我确实有一个打字错误，而且我最终确实做了我想做的正确的事情。 特别感谢 Johannes，我意识到，如果您像我一样尝试这样做，并使用 Bootstrap，请确保在位置后添加 !important：fixed;在你的 CSS 中，因为它会覆盖 Bootstraps 在这方面的默认属性，让你在向下滚动时无法将导航栏保留在屏幕上！ 不要忘记宽度应该是100% 导航 { text-align: center; position: fixed !important; width: 100%; } 您有一个针对 calss .navbar 的 CSS 规则，其中包含 position: relative。这会覆盖 nav 的固定设置 将 !important 添加到您的位置：nav的固定设置： nav { text-align: center; position: fixed !important; 等等 这应该可以解决它。 http://codepen.io/anon/pen/ZWBwEW
我正在使用 Joomla 4 和 Cassiopeia 主题（实际上是 Cassiopeia 的子主题） 我想要将菜单放在水平两行上。 当我向菜单添加一个项目时，它会导致导航容器尺寸过大......
如何减小 CSS 中 标签的大小？我似乎无法弄清楚。我在下面提供了我的项目中的所有代码。我的代码确实有 PHP，但由于它我已将其删除...... 如何减小 CSS 中 <nav> 标签的大小？我似乎无法弄清楚。我在下面提供了我的项目中的所有代码。我的代码确实有 PHP，但由于没有必要，我已将其删除。如果您想预览那里的代码，这里有一个 JSFiddle。 HTML 和 CSS： #top-menu { top: 0; position: fixed; } nav { position: relative; /*float: left;*/ width: 100%; background: #1E1E1E; /* display: table; */ margin: 0; text-align: center; height: 25px; border: none; border-width: 0; margin: 0; padding: 10px 10px; } nav ul ul { display: none; } nav ul li:hover > ul { display: block; border: none; border-width: 0; } nav ul { background: #1E1E1E; color: white; padding: 10px 10px; border-radius: 0; list-style: none; position: relative; display: inline-table; border-width: 0; border: none; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; border: none; border-width: 0; } nav ul li:hover { background: #1E1E1E; background-color: orange; color: white; } nav ul li:hover a { color: #fff; } nav ul li a { display: block; height: 25px; padding: 10px 10px; color: #757575; text-decoration: none; border: none; border-width: 0; } nav ul ul { background: #1E1E1E; color: white; border-radius: 0px; padding: 10px 10px; position: absolute; top: 50px; border-width: 0; margin-bottom: 0; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 10px 10px; color: #fff; height: auto; } nav ul ul li a:hover { background: #4b545f; background-color: orange; } nav ul ul ul { position: absolute; left: 100%; top: 0; } nav li#english a { background: url(images/english.jpg) no-repeat; background-position: center center; } nav li#english a:hover { background: url(images/english.jpg) no-repeat; background-position: center center; background-color: orange; } nav li#english a.current { background: url(images/english.jpg) no-repeat; background-position: center center; cursor: default; } /*--------------------------------------------*/ #menu { background-color: #1E1E1E; text-align: center; padding-bottom: 0px; } body { margin: 0px; } .clearfloat { clear: both; margin: 0; padding: 0; } /*--------------------------------------------*/ #bottom { float: left; width: 100%; background: #1E1E1E; /*display: table; */ margin: 0; text-align: center; min-height: 25px; height: 25px; border-width: 0px; margin-top: 0px; padding-top: 0px; bottom: 0px; position: fixed; } #bottom ul ul { display: none; } #bottom ul li:hover > ul { display: block; } #bottom ul { background: #1E1E1E; color: white; padding: 0 0; border-radius: 0; list-style: none; position: relative; display: inline-table; } #bottom ul:after { content: ""; clear: both; display: block; } #bottom ul li { float: left; } #bottom ul li:hover:nth-child(1) { background: #1E1E1E; color: #757575; text-decoration: none; } #bottom ul li:hover:nth-child(2) { background: #1E1E1E; color: #757575; text-decoration: none; } #bottom ul li:hover { background: #1E1E1E; color: white; text-decoration: underline; } #bottom ul li:hover a { color: #fff; } #bottom ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; } #bottom ul ul { background: #1E1E1E; color: white; border-radius: 0px; padding: 0; position: absolute; top: 100%; width: auto; } #bottom ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } #bottom ul ul li a { padding: 15px 40px; color: #fff; } #bottom ul ul li a:hover { background: #4b545f; } #bottom ul ul ul { position: absolute; left: 100%; top: 0; } /*--------------------------------------------*/ .bottommenuitem { vertical-align: middle; padding: 25px 40px; color: #757575; } <!DOCTYPE html5> <html> <head> <title>Firma A/S</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="cssMenu.css"> </head> <body> <nav id="top-menu"> <p id="menu" style="margin-bottom: -25"> <a href="Index.html"> <img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" /> </a> <img src="Top_10.jpg" alt="" width="739" height="243" /> </p> <nav id="top"> <ul> <li><a href="index.php">Velkommen</a> </li> <li><a href="index.php">Firma A/S</a> <ul> <li><a href="index.php">Koncern oversigt</a> <ul> <li><a href="index.php">Ejendomsselskaber</a> </li> <li><a href="index.php">Investeringsselskaber</a> </li> <li><a href="index.php">Øvrige selskaber</a> </li> <li><a href="index.php">Lukkede eller solgte selskaber</a> </li> </ul> </li> <li><a href="index.php">Jubilæum</a> </li> <li><a href="index.php">Årsrapport</a> </li> <li><a href="index.php">Galleri</a> </li> <li><a href="index.php">Kontaktoplysninger</a> </li> </ul> </li> <li><a href="index.php">Privat</a> </li> <li><a href="index.php">Køb og salg</a> </li> <li><a id="english" href="index.php">In English</a> </li> </ul> <!-- PHP was here --> </nav> </nav> <div style="margin-top: 410; margin-bottom: 115"> <!-- More PHP was here --> </div> <nav id="bottom"> <ul> <li class="bottommenuitem">Firma A/S</li> <li class="bottommenuitem">phone No</li> <li><a href="mailto:[email protected]">[email protected]</a> </li> </ul> </nav> </body> </html> 如有任何帮助，我们将不胜感激，谢谢。 请尝试这个： nav ul { background: #1e1e1e none repeat scroll 0 0; border: medium none; border-radius: 0; color: white; display: inline-table; list-style: outside none none; margin: 0; padding: 10px; position: relative; } nav { float: left; width: 100%; background: #1E1E1E; display: table; margin: 0; text-align: center; height: 25px; border: none; border-width: 0; margin: 0; padding: 10px 10px; } nav ul ul { display: none; } nav ul li:hover > ul { display: block; border: none; border-width: 0; } nav ul { background: #1E1E1E; color: white; padding: 10px 10px; border-radius: 0; list-style: none; position: relative; display: inline-table; border-width: 0; border: none; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; border: none; border-width: 0; } nav ul li:hover { background: #1E1E1E; background-color: orange; color: white; } nav ul li:hover a { color: #fff; } nav ul li a { display: block; height: 25px; padding: 10px 10px; color: #757575; text-decoration: none; border: none; border-width: 0; } nav ul ul { background: #1E1E1E; color: white; border-radius: 0px; padding: 10px 10px; position: absolute; top: 50px; border-width: 0; margin-bottom: 0; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 10px 10px; color: #fff; height: auto; } nav ul ul li a:hover { background: #4b545f; background-color: orange; } nav ul ul ul { position: absolute; left: 100%; top: 0; } nav li#english a { background: url(images/english.jpg) no-repeat; background-position: center center; } nav li#english a:hover { background: url(images/english.jpg) no-repeat; background-position: center center; background-color: orange; } nav li#english a.current { background: url(images/english.jpg) no-repeat; background-position: center center; cursor: default; } <nav id="top-menu"> <p id="menu" style="margin-bottom: -25"> <a href="Index.html"> <img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" /> </a> <img src="Top_10.jpg" alt="" width="739" height="243" /> </p> <nav id="top"> <ul> <li><a href="index.php">Velkommen</a> </li> <li><a href="index.php">Firma A/S</a> <ul> <li><a href="index.php">Koncern oversigt</a> <ul> <li><a href="index.php">Ejendomsselskaber</a> </li> <li><a href="index.php">Investeringsselskaber</a> </li> <li><a href="index.php">Øvrige selskaber</a> </li> <li><a href="index.php">Lukkede eller solgte selskaber</a> </li> </ul> </li> <li><a href="index.php">Jubilæum</a> </li> <li><a href="index.php">Årsrapport</a> </li> <li><a href="index.php">Galleri</a> </li> <li><a href="index.php">Kontaktoplysninger</a> </li> </ul> </li> <li><a href="index.php">Privat</a> </li> <li><a href="index.php">Køb og salg</a> </li> <li><a id="english" href="index.php">In English</a> </li> </ul> </nav> </nav> 如果您正在谈论固定导航 id=top-menu，只需为 id 选择器的 CSS 添加高度即可。这个对我有用。如果您在覆盖它时遇到问题，请确保将其放置在 CSS 文件中的较低位置或添加 !important 规则之后。 #top-menu { height: 6px; } #top-menu { height: 6px !important; }
我有一个带有 img 的导航栏。默认情况下，它位于页面左侧。我想将其显示在右侧 .标志-img{ 浮动：右； 边距：0px 15px 15px 0px； 我有一个带有 img 的导航栏。默认情况下，它位于页面左侧。我想显示在右边 .logo-img{ float: right; margin: 0px 15px 15px 0px; <a class="navbar-brand logo-img" href="#"><img src="images/my_graphic_transparent.jpg" alt="shield" width="90" ></a> 我尝试在样式区域中创建 .log-img，然后在类导航栏中使用它，但是图形不会移动到右侧 .logo-img{ float: right; margin: 0px 15px 15px 0px; <a class="navbar-brand logo-img" href="#"><img src="images/my_graphic_transparent.jpg" alt="shield" width="90" ></a> 如果您使用 Bootstrap-5，您可以在父容器中使用 d-flex 类作为链接，如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script> <title>Document</title> </head> <body> <nav class="navbar bg-light"> <div class="container d-flex justify-content-end"> <a class="navbar-brand" href="#"> <img src="/img/cat.svg" alt="Bootstrap" width="60" height="54"> </a> </div> </nav> </body> </html> 这是结果：
我正在尝试通过为我的页面制作导航栏来练习我的 HTML5 和 CSS3 技能，但我遇到了很多麻烦。我正在尝试使用 HTML5 语义标签来制作它，但他们都没有看我如何...
Bootstrap Mobile Nav Transition 显示的不是我在 CSS 中编程的内容
在桌面和移动屏幕尺寸中，我有一个白色的导航栏。 对于移动下拉菜单，我希望背景为灰色。 我已经在较小的屏幕上完成了这个目标 .show - 用 css f 编写...
我想要实现的目标的示例： 这是我的 HTML 代码： 我想要实现的目标的示例： 这是我的 HTML 代码： <ul class="nav nav-tabs flex-nowrap" id="myTab" role="tablist"> <li class="nav-item" style="margin-left: -1px"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" > About </button> </li> <li class="nav-item"> <button class="nav-link" id="personalize-tab" data-bs-toggle="tab" data-bs-target="#personalize" type="button" > Personslize </button> </li> <li class="nav-item"> <button class="nav-link" id="http-proxy-tab" data-bs-toggle="tab" data-bs-target="#http-proxy" type="button" > Http Title </button> </li> <li class="nav-item" id="data-processor-display" style="display: none"> <button class="nav-link" id="data-processor" data-bs-toggle="tab" data-bs-target="#data-processor-click" type="button" > DSP Titel </button> </li> <li class="nav-item" id="mate-setting-display" style="display: none"> <button class="nav-link" id="mate-settings" data-bs-toggle="tab" data-bs-target="#mate-setting-click" type="button" > MS Title </button> </li> <li class="nav-item" id="mate-manage-display" style="display: none"> <button class="nav-link" id="mate-manage" data-bs-toggle="tab" data-bs-target="#mate-manage-click" type="button" > MM Title </button> </li> </ul> 这是我尝试过的CSS： .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: rgb(5, 5, 5); background-color: rgb(249, 249, 249); border: 1px solid rgb(198 198 198); height: 22px; border-bottom: 1px solid transparent; } 我正在使用引导程序，data-bs-toggle="tab"。 我希望活动选项卡比其他选项卡高一点。 您可以通过在活动选项卡上使用负边距并增加底部填充相同的精确距离来实现此目的。 示例： .nav-link.active { margin-top: -2px; padding-bottom: calc(0.5rem + 2px) } 在上面的CSS中，2px是活动项目向上移动的距离，不影响其他任何东西。 注意，我将 padding-bottom 设置为 calc(0.5rem + 2px)，因为选项卡控件上的默认引导底部填充是 0.5rem。如果您使用的主题将该填充设置为不同的值，则需要进行相应的调整。 看到它工作了： body { padding-top: 2rem; } .nav-link.active { margin-top: -2px; padding-bottom: calc(0.5rem + 2px) } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" /> <body> <div class="container"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true" > Home </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false" > Profile </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false" > Contact </button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" > ... </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" > ... </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" > ... </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous" ></script> </body>
我正在构建一个简单的食谱网站，我有 3 个导航链接： 家 食谱 关于我们。 我的 id 属性与 href 属性中的值匹配，但导航链接仍然不活动或向下滚动到
我对 html 和 css 还很陌生，正在为我正在学习的课程设计一个模拟作品集。这是一个单页作品集，我们得到的指示是每个部分必须 100% 高度指定...
我如何用CSS整理我的页面，我很乐意告诉我“那个”代码的作用以及何时使用它，我只是一个初学者，它真的会很有帮助，提前感谢！ ，确切地说...
我的导航不会显示在页面顶部，我尝试了 z-index 和所有内容，但如果我删除变换，则会出现栏，但占据了一半的屏幕。 ...
Bootstrap 4.5 防止导航栏菜单下拉菜单在打开另一个菜单时关闭
我有一个 Bootstrap 4.5 导航栏菜单，已调整为侧边菜单。它工作正常，但是我在菜单中有下拉菜单，当我打开一个下拉菜单时，它会切换关闭另一个下拉菜单...
我希望将我的导航元素放置在网页的右侧，确实如此。那里没有问题。我的问题是我的导航元素太靠近了。我希望他们能更加疏远。什么是...
为什么 WordPress 网站上同时显示移动和桌面导航菜单？
使用 Elementor Pro 在 WP 网站（网站链接）上工作，我的问题是，在编辑页面和网站时，标题看起来不错，但在实时网站上，移动和桌面导航菜单都会显示...
包含在主页中时，标题标签显示错误。 这是我试图包含的电子商务页面 标题标签存在问题，当包含在主页中时显示错误。 这是我试图包含的电子商务页面 <body> <header id="header"> </header> <footer id="footer"> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> $(function(){ $("#header").load('header.html'); $("#footer").load('footer.html'); }); </script> </body> 它应该看起来像这样。 您需要在根目录中有 header.html 文件并使用网络服务器运行index.html 我为您创建复制代码：https://stackblitz.com/edit/web-platform-ubnol3?file=index.html