为什么剃刀语法会破坏 css 风格？

Question

在我的 asp.net mvc 应用程序布局中，我有 css 样式，如下图所示：

<div class="col-md-6 col-sm-6 additional-nav">
   <ul class="list-unstyled list-inline pull-right">
      <li><a href="shop-account.html">My Account</a></li>
      <li><a href="shop-wishlist.html">My Wishlist</a></li>
      <li><a href="shop-checkout.html">Checkout</a></li>
      <li><a href="page-login.html">Log In</a></li>
   </ul>
</div>

我添加了一种 razor 语法的表单类型，但样式已更改为以下内容：

<div class="col-md-6 col-sm-6 additional-nav">
   <ul class="list-unstyled list-inline pull-right">
      <li><a href="shop-account.html">My Account</a></li>
      <li><a href="shop-wishlist.html">My Wishlist</a></li>
      <li><a href="shop-checkout.html">Checkout</a></li>
      @if (Request.IsAuthenticated)
      {
      using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
      {
      @Html.AntiForgeryToken()
      <li>
         @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
      </li>
      <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
      }
      }
      else
      {
      <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
      <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
      }
   </ul>
</div>

你觉得问题出在哪里？！我怎样才能实现第一个设计？感谢任何帮助，提前致谢。

Answer 1

<ul> 标签只能包含 <li>s.

你不能在中间塞一个<form>。

Answer 2

我不是 css 专家，但我认为这可以由 css 完成。

在表单标签中添加样式属性，如：

new { style="display: inline-flex;" }

Answer 3

您可以将 form 标记留在 <ul> 之外：毕竟，您是在使用 Javascript 触发该表单的提交操作。即：

<!-- Logout Form -->
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
    {
        @Html.AntiForgeryToken()
    }
}
<!-- Horizontal menu options -->
<div class="col-md-6 col-sm-6 additional-nav">
   <ul class="list-unstyled list-inline pull-right">
      <li><a href="shop-account.html">My Account</a></li>
      <li><a href="shop-wishlist.html">My Wishlist</a></li>
      <li><a href="shop-checkout.html">Checkout</a></li>
      @if (Request.IsAuthenticated)
      {
      <li>
         @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
      </li>
      <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
      }
      else
      {
      <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
      <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
      }
   </ul>
</div>

为什么剃刀语法会破坏 css 风格？

Why is the razor syntax disrupting the css style?

html

css

styles

razor