ASP.NET MVC C# 如何分离导航栏链接？

Question

我有一个 C# 项目 ASP.NET Core with MVC。目前我已经添加了 4 个用户可以上传文件的类别，它们的类别显示在导航栏中。问题是，所有导航栏项目（链接）之间甚至没有间距。任何人都可以帮我提供一个示例代码，请告诉我如何在它们之间有一条严肃的 space 甚至垂直线？我是新手，不太擅长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>

Answer 1

如果说严肃 space，你的意思是在网页上视觉化，你是通过 CSS 来实现的。或者使用
html 标签，如果你想要它们垂直 spaced，但我建议不要使用后者。

Answer 2

可能的方法是将 CSS（示例如下）和参数“, new { @class = "navbar-li" }" 添加到您的 @Html.ActionLink 函数中。参数将 class "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>

ASP.NET MVC C# 如何分离导航栏链接？

ASP.NET MVC C# How To Separate Navigation Bar Links?

html

c#

asp.net-mvc

razor