gpt4 book ai didi

html - 右对齐菜单导航项

转载 作者:太空宇宙 更新时间:2023-11-04 08:31:41 25 4
gpt4 key购买 nike

我有这个菜单,我需要右对齐所有导航项。我试过使用 position、float 和 right:0,但似乎没有任何效果。

<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md">
<div class="container" style="background-color:#ff6a00;padding:22px;position:relative;">
<div class="navbar-header">
<button type="button" class="navbar-toggler navbar-toggler-right" style="position:absolute;top:46px" data-toggle="collapse" data-target="#navbarFullCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a asp-controller="Home" asp-action="Index" class="navbar-brand"><h1>Artist Name</h1></a>
</div>
<div class="navbar-collapse collapse" style="position:relative;right:0px;">
<div class="navbar-nav">
<a class="nav-item nav-link" asp-controller="Home" asp-action="Overviev">Oveview</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Grafiti">Grafitti</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Digital">Digital</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Pencil">Pencil</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Graphic">Graphics</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Mase">Mase</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="GrandCentral">Grand Central</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Painting">Painting</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Mjau">Mjau</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Misc">Misc</a>
</div>
</div>
</div>
</nav>

最佳答案

在导航项的父级上使用 justify-content-end 帮助器类。这会将 flex 子项与 flex 行中的主轴末端对齐。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md">
<div class="container" style="background-color:#ff6a00;padding:22px;position:relative;">
<div class="navbar-header">
<button type="button" class="navbar-toggler navbar-toggler-right" style="position:absolute;top:46px" data-toggle="collapse" data-target="#navbarFullCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a asp-controller="Home" asp-action="Index" class="navbar-brand"><h1>Artist Name</h1></a>
</div>
<div class="navbar-collapse collapse justify-content-end" style="position:relative;right:0px;">
<div class="navbar-nav">
<a class="nav-item nav-link" asp-controller="Home" asp-action="Overviev">Oveview</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Grafiti">Grafitti</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Digital">Digital</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Pencil">Pencil</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Graphic">Graphics</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Mase">Mase</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="GrandCentral">Grand Central</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Painting">Painting</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Mjau">Mjau</a>
<a class="nav-item nav-link" asp-controller="Home" asp-action="Misc">Misc</a>
</div>
</div>
</div>
</nav>

关于html - 右对齐菜单导航项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44739598/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com