html - 与导航栏位于同一行的 FontAwesome 图标

Question

我有一个导航栏，它可以在用户登录之前正确显示。

登录前:

登录后:

我无法弄清楚为什么注销 fontawesome 图标会换行到下一行，而它的大小与用于登录的头像图标相同(我试图让它甚至稍微小一些)。问题不在于父 div 的宽度，因为我试图添加另一个 <li><a>Test Item</a></li>它没有换行到下一行。

HTML:

<ul class="nav navbar-nav navbar-right">
                    <li><a class="active" href="../../">Home</a></li>
                    <li><a href="../../Home/Build">Build A Box</a></li>
                    <li><a href="../../Home/Faq">FAQ</a></li>
                    <li><a href="../../Home/Contact">Contact Us</a></li>
                    @if (User.Identity.IsAuthenticated)
                    {
                        <li><a href="../../Home/Account">My Account</a></li>
                        using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
                        {
                            @Html.AntiForgeryToken()


                                <li><a href="javascript:document.getElementById('logoutForm').submit()" class="nav-link fa fa-sign-out"></a></li>

                        }
                    }
                    else
                    {
                        <li class="nav-item dropdown">
                            <a href="#" id="LoginDropdownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" class="nav-link dropdown-toggle fa fa-user-circle"></a>
                            <div class="dropdown-menu" aria-labelledby="LoginDropdownLink">
                                @using (Html.BeginForm("Login", "Account", new { ReturnUrl = "../../Home/Account" }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                                {
                                    @Html.AntiForgeryToken()


                                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })



                                            @Html.TextBoxFor(m => m.Email, new { @class = "input-text", @placeholder="Email Address"})
                                            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })



                                            @Html.PasswordFor(m => m.Password, new { @class = "input-text", @placeholder="Password" })
                                            @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })



                                                @Html.CheckBoxFor(m => m.RememberMe)
                                                @Html.LabelFor(m => m.RememberMe)


                                            <input type="submit" value="Log in" class="btn btn-default" />


                                }
                            </div>
                        </li>
                    }
                </ul>

Answer 1

如果没有 CSS 很难说，但请尝试在注销链接的类属性中删除 nav-link(代码中的 l.14)。

所以该行将是:

<li><a href="javascript:document.getElementById('logoutForm').submit()" class="fa fa-sign-out"></a></li>

因为其他链接没有这个类所以我怀疑它是你的麻烦的原因。