为什么剃刀语法破坏了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

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

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

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

Answer 2

<ul>代码只能包含<li> s。

你不能在中间填充<form>。

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>