nav 相关问题

仪表板.html 仪表板.html <nav #nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-categories-tab" data-bs-toggle="tab" data-bs-target="#nav-categories" type="button" role="tab" aria-controls="nav-categories" aria-selected="true" (click)="showCategories()" [ngClass]="currentClass">Categories</button> <button class="nav-link" id="nav-product-lists-tab" data-bs-toggle="tab" data-bs-target="#nav-product-lists" type="button" role="tab" aria-controls="nav-product-lists" aria-selected="false"(click)="showProducts()" [ngClass]="currentClass">Products</button> <button class="nav-link" id="nav-product-details-tab" data-bs-toggle="tab" data-bs-target="#nav-product-details" type="button" role="tab" aria-controls="nav-product-details" aria-selected="false" (click)="showProductDetails()" [ngClass]="currentClass">Product Details</button> </div> </nav> 这是我的产品 tab.html <div class="container"> <div class="list row ms-3"> <div class="col-md-12"> <p-table [value]="products" styleClass="p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th>Name</th> <th>Image</th> <th>Category</th> <th>Price</th> <th>Actions</th> </tr> </ng-template> <ng-template pTemplate="body" let-product> <tr> <td>{{product.title}}</td> <td><img [src]="product.image" [alt]="product.title" width="100" class="shadow-4" /></td> <td>{{product.category}}</td> <td>{{product.price | currency:'USD'}}</td> <td><a class="btn btn-outline-primary" (click)="getProductDetailsById(product,'product-details')">View</a></td> <td><a class="btn btn-info" (click)="getProductById(product)">Edit</a></td> <td><button class="btn btn-danger" (click)="deleteProduct(product)"> Delete</button></td> </tr> </ng-template> <ng-template pTemplate="summary"> <div class="flex align-items-center justify-content-between"> In total there are {{products ? products.length : 0 }} products. </div> </ng-template> </p-table> </div> </div> 现在，如果我单击“查看”按钮，它将导航到“产品详细信息/1”，但该选项卡未激活。那么我如何访问导航按钮并向其添加活动类并使其他按钮类处于非活动状态。如果您使用角度路由，您可以使用 [routerLinkActive] 指令将类项传递到具有 [routerLink] 指令的按钮。例如： <button [routerLinkActive]="'class-active'" [routerLink]="['product-details', id]"> Product Details </button> 在这种情况下，您需要从 showProductDetails() 中移出逻辑以使用 [routerLink] 指令。有关更多详细信息，请参阅https://angular.io/api/router/RouterLinkActive#description

angular bootstrap-5 nav

回答 1 投票 0

css 不适用于带有 bootstrap 5 的 vue 3 项目中默认选择的导航链接

我第一次，请耐心等待。我想突出显示选定的导航链接，它运行良好，但第一个（小）不突出显示。即使我选择其他的（中号或大号，也确实如此......

html css vue.js bootstrap-5 nav

回答 2 投票 0

如何将导航栏分成3部分？

我正在制作一个评论网站，并且我按照导航栏上的教程进行操作。导航栏是响应式的。但是，我需要添加和编辑它的一些元素，但我不知道如何做。我想分手...

html css nav

回答 2 投票 0

将菜单栏与文本和图标元素以及其外部的购物车图标垂直对齐

我有一个菜单栏，其中包含文本项和搜索图标（.main-navigation）。此外，在此菜单栏旁边但在其外部有一个购物车图标 (.site-header-cart)。我需要这些...

html css html-lists nav

回答 1 投票 0

第二个导航栏悬停在一个块上，而不仅仅是一条线

好的，在我的网站中，我有第二个导航栏来放置类别。我有 9 个类别，其中 2 个类别只有一行，因此悬停仅悬停在该行而不是该块上。可以将鼠标悬停在块上...

html css navbar nav

回答 1 投票 0

如何制作一个不拉伸整个页面的水平居中导航栏？

我一直想制作一个不会拉伸整个页面的水平导航栏。最终遵循了有关如何制作与我的想法非常相似的导航栏的教程（https://cssde...

html css navbar nav

回答 1 投票 0

给<nav>一个边框

我正在使用 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;

css html border nav

回答 5 投票 0

响应式设计导航按钮布局问题

我只是在这里学习html / css。现在我正在尝试使用响应式设计设置我的第一个网页。当视口为红色时，我已将其他所有内容设置为减少为单列布局...

html css responsive-design nav

回答 1 投票 0

导航栏升级至 Bootstrap 5

嗨，我需要将我的页面从 bootstrap 4.6.0 升级到 bootstrap 5.x.x 一旦我将 data-toggle 升级到 data-bs-toggle，活动选项卡就会停止工作，即第一个选项卡始终保持活动状态，无论如何

bootstrap-5 nav listitem

回答 1 投票 0

引导导航栏在滚动时不会向下移动

我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏： &... 我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏： <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

css navbar nav

回答 4 投票 0

Joomla 4 带有 2 行水平菜单

我正在使用 Joomla 4 和 Cassiopeia 主题（实际上是 Cassiopeia 的子主题）我想要将菜单放在水平两行上。当我向菜单添加一个项目时，它会导致导航容器尺寸过大......

drop-down-menu joomla bootstrap-5 nav

回答 2 投票 0

如何在html或css中设置<nav>的高度

如何减小 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>  </nav> </nav> <div style="margin-top: 410; margin-bottom: 115">  </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; }

html css nav

回答 3 投票 0

将导航栏中的图片向右移动

我有一个带有 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> 这是结果：

javascript css navbar bootstrap-5 nav

回答 1 投票 0

如何制作功能性 HTML5 导航栏

我正在尝试通过为我的页面制作导航栏来练习我的 HTML5 和 CSS3 技能，但我遇到了很多麻烦。我正在尝试使用 HTML5 语义标签来制作它，但他们都没有看我如何...

html css nav

回答 2 投票 0

nav 相关问题

最新问题