nav 相关问题

`<nav>`元素是新的HTML5元素,它定义了一段导航链接。

CSS HTML 和 Javascript

当我设置导航项目位置时如何解决这个问题固定它在我向下滚动时消失项目。顺便说一句我使用了z-index但它不起作用.css和html 我尝试使用 z-index 来...

回答 1 投票 0

当我更改横幅高度时,导航链接停止工作

我的横幅只需要针对这个特定页面变小,当我尝试使用 css 内联时,它确实将高度更改为我需要的高度,但我的链接停止工作。 这是我的 css 上的代码...

回答 1 投票 0

CSS 和 <nav> :防止从填充中插入国家(国旗)图标

我正在维护一个非常简单的静态网页,用于显示我的简历。我想在 元素中实现一个语言切换器,以便访问者可以选择两种语言中的任何一种。这一点点... 我正在维护一个非常简单的静态网页,用于显示我的简历。我想在 元素中实现一个语言切换器,以便访问者可以选择两种语言中的任何一种。这会稍微扰乱原本居中的文本。 样式.css nav { position: sticky; top:0 } #lang_nav { float: right; margin-right: 5px } nav, footer { padding:0; text-align: center } index.html <nav> <a href="/">home</a> <a href="index.fr.html" hreflang="fr" id="lang_nav" class="lang_fr"> <img src="media/fr.png" alt="fr"> </a> </nav> 我非常有信心应该有一个基本的 CSS 属性或简单的 hack 来解决这个问题。难道我错了? nav { position: sticky; top:0 ;display: flex; align-items: center; justify-content: space-between;} #lang_nav { float: right; margin-right: 5px } nav, footer { padding:0; text-align: center } <nav > <a href="/"></a> <a href="/">home</a> <a href="index.fr.html" hreflang="fr". id="lang_nav" class="lang_fr"> <img src="media/fr.png" alt="fr"> </a> </nav>

回答 1 投票 0

导航栏下拉菜单在香草 CSS 周围跳转

www.jestforbeginners.com 在该网站的主页上,我为故障排除选项卡创建了一个下拉菜单。然而,当我将鼠标悬停在菜单上时,它会不断跳跃。我添加了一些 CSS

回答 1 投票 0

将“主页”链接移至导航栏左侧

我将导航设置为标题,并希望有一个指向主页的链接。我的 Div 设置为 justify-content-center 以将表单文本居中,但是我似乎无法将 .homeLink 放置到文件中...

回答 1 投票 0

display:flex 是否适用于语义标签 - nav?

我想制作导航栏和内部标题标签,其中有一个 nav 标签,后跟 ul 和 3 li 标签。我想在我的导航上应用 Flex 属性,但它不起作用。 如果我放一个 div 标签而不是 nav

回答 1 投票 0

未应用此特定 CSS 属性(在检查模式下划掉)

作为新手,我正在使用 bootstrap 5 制作一个简单的网站。在制作导航栏并亲自定制它时,我注意到其中一个 CSS 属性根本不适用。具体来说,...

回答 1 投票 0

如何使我的 HTML 主页链接正常工作?

我用 HTML 创建了一个导航栏。当我在 VisualCode 中运行代码时,它可以工作,但是当我转到其他选项卡并想返回主页时,它不起作用,它会给我一个错误。错误是啊啊啊

回答 1 投票 0

使用视频作为背景时(HTML/CSS),导航栏不会延伸到网页的 100%

最近我遇到了一个似乎无法解决的问题;导航栏没有到达屏幕的左端,只能到达右端。这个问题只有当我尝试将视频放在...

回答 1 投票 0

从子组件更改父组件的类

仪表板.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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 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;

回答 5 投票 0

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

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

回答 1 投票 0

导航栏升级至 Bootstrap 5

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

回答 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

回答 4 投票 0

Joomla 4 带有 2 行水平菜单

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

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.