ASP.NET MVC C# 如何分隔导航栏链接？答案

【问题标题】：ASP.NET MVC C# How To Separate Navigation Bar Links?ASP.NET MVC C# 如何分隔导航栏链接？
【发布时间】：2021-11-03 11:55:33
【问题描述】：

我有一个带有 MVC 的 C# ASP.NET Core 项目。目前我已经添加了 4 个用户可以上传文件的类别，它们的类别显示在导航栏中。问题是，所有导航栏项目（链接）之间甚至没有间距。任何人都可以帮助我提供一个示例代码，请教如何在它们之间设置一个严肃的空间甚至垂直线？我是新手，不太擅长cs.html。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Choose between the skill categories:</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            
            <li class="nav-item active">@Html.ActionLink("Beginner", "Index", "Home", new { id = "incepator" })</li>


            <li class="nav-item active">@Html.ActionLink("Intermediate", "Index", "Home", new { id = "intermediar" })</li>

            <li class="nav-item active">@Html.ActionLink("Advanced", "Index", "Home", new { id = "admin" })</li>
            <li class="nav-item active">@Html.ActionLink("Master", "Index", "Home", new { id = "master" })</li>
            <li class="nav-item active">@Html.ActionLink("Show All", "Index", "Home", new { id = "" })</li>




        </ul>

【问题讨论】：

您能否提供导航栏的屏幕截图以帮助可视化问题？

标签： c# html asp.net-mvc razor

【解决方案1】：

可能的方法是将 CSS（示例如下）和参数 ", new { @class= "navbar-li" }" 添加到您的 @Html.ActionLink 函数中。参数将类“navbar-li”添加到 li 标签。 CSS 样式的内容。

修改样本：

<head>
    <style type="text/css">

        .navbar-li {
          font-family:'Open Sans'
          font-size: 15px;  
          padding: 15px 15px;
        }
        
        ul.navbar-nav {
          list-style-type: none;
        }
        
        ul.navbar-nav li {
          border-right: 1px solid #000;
        }

        ul.navbar-nav li:last-of-type {
          border-right: none;
        }
        
    </style>
</head>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">@Html.ActionLink("Beginner", "Index", "Home", new { id = "incepator" }, new { @class = "navbar-li" })</li>
        <li class="nav-item active">@Html.ActionLink("Intermediate", "Index", "Home", new { id = "intermediar" }, new { @class = "navbar-li" })</li>
        <li class="nav-item active">@Html.ActionLink("Advanced", "Index", "Home", new { id = "admin" }, new { @class = "navbar-li" })</li>
        <li class="nav-item active">@Html.ActionLink("Master", "Index", "Home", new { id = "master" }, new { @class = "navbar-li" })</li>
        <li class="nav-item active">@Html.ActionLink("Show All", "Index", "Home", new { id = "" }, new { @class = "navbar-li" })</li>
    </ul>
</div>

【讨论】：

非常感谢

【解决方案2】：

如果说严重的空间，你的意思是网页上的视觉效果，你可以通过 CSS 来做到这一点。或者，如果您希望它们垂直间隔，则使用
html 标记，但我建议不要使用后者。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。