`<nav>`元素是新的HTML5元素，它定义了一段导航链接。
如何减小 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
我试图让我的子菜单在主菜单下方打开全角。然而，它的行为很奇怪，只向右侧打开全角，而不向左侧打开。另外，子菜单与我的菜单重叠...
我试图在同一行（网页的最顶部）的导航栏后面添加一个简单的文本标题，但我似乎无法找到一种方法将它们保持在同一行。 下面的代码 CSS： .navbar div {
我使用bootstrap 5.3制作导航栏，我使用offcanvas。但为什么我的导航栏变得透明并且只有左侧的文字可见 我希望导航栏看起来像我使用了 offcanvas
我无法让我的旋转木马在 bootstrap 4 下正常工作，不知道为什么，所以更新到 bootstrap 5，旋转木马工作正常。但是，我的导航栏下拉菜单现在已停止工作。好吧，我承认，
我在顶级下拉菜单中有多个下拉菜单。我遇到一个问题，当我单击打开一个子菜单时，内容与容器重叠。我想将容器缩放到子
网站上没有显示标签，只有 about.html 显示，home.html 和 services.html 没有显示
只有about.html 显示它的内容。 index.html 和 services.html 没有在网站上显示，它显示找不到请求的 url 文件。 家 关于 服务