如何在MVC应用中将菜单列表的最后一个元素移至菜单栏右侧？

你的导航栏基于Bootstrap框架实现，最简单的方法有两种，优先推荐利用Bootstrap自带的类来实现，无需额外编写自定义CSS：

方法一：使用Bootstrap的navbar-right类 #

把最后一个菜单项单独放到一个新的<ul>中，并添加navbar-right类，这个类会自动让导航项右对齐：

<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="more options">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        @Html.ActionLink("Candidate Site", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
        </ul>
        <!-- 单独放置退出按钮并右对齐 -->
        <ul class="nav navbar-nav navbar-right">
            <li>@Html.ActionLink("Log Out", "LogOut", "Login")</li>
        </ul>
    </div>
</div>
</div>

方法二：用CSS的margin-left: auto（不拆分列表） #

如果不想拆分原有的<ul>，可以直接给最后一个<li>添加内联样式，利用flex布局的特性将其推到右侧：

<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="more options">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        @Html.ActionLink("Candidate Site", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <!-- 给最后一个li添加样式实现右对齐 -->
            <li style="margin-left: auto;">@Html.ActionLink("Log Out", "LogOut", "Login")</li>
        </ul>
    </div>
</div>
</div>

如果需要复用这个样式，也可以定义一个CSS类：

.nav-push-right {
    margin-left: auto;
}

然后给目标<li>添加类：<li class="nav-push-right">...</li>

内容的提问来源于stack exchange，提问作者Jamie_Talbot9