Question

我有一个像这样的嵌套元素;

<li style="padding-left: 5%; padding-right: 5%; margin:auto;" >

    <a style="color: black; padding-left:0%; padding-right: 0%;; text-decoration: none;" asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>

</li>

问题是，在页面加载时，<a>元素从其框中伸出，这是来自bootstrap的dropdown-menu dropdown-user类。令我困惑的是，当窗口调整大小时，下拉列表会调整大小以使元素适合。这是为什么？

这是整个片段;

<li id="LoginPartial">
@using Microsoft.AspNetCore.Identity
@using BiggestLoser.Models

@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager

@if (SignInManager.IsSignedIn(User))
    {
        <form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" >
            <ul style="padding:0px; color: black; text-decoration: none;">
                <li style="padding-left: 5%; padding-right: 5%; margin:auto;" >
                    <a style="color: black; padding-left:0%; padding-right: 0%;; text-decoration: none;" asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
                </li>
                <li>
                    <button type="submit" class="btn btn-link navbar-btn navbar-link" style="color: black; padding:0px; text-decoration: none;" ><i class="fa fa-sign-out"></i> Log out</button>
                </li>
            </ul>
        </form>
    } else {
        <ul style="padding-left:0px; padding-right:0px">
            <li><a style="color: black; text-decoration: none;" asp-area="" asp-controller="Account" asp-action="Register"><i class="fa fa-plus-circle"></i>  Register</a></li>
            <li><a style="color: black; text-decoration: none;" asp-area="" asp-controller="Account" asp-action="Login"><i class="fa fa-sign-in"></i>  Log in</a></li>
        </ul>
    }
</li>

[编辑]

我发现它是导致问题的<a>元素（嵌套在<li＆gt;元素中）的填充。一旦我在Chrome Dev工具中打开和关闭填充，它似乎只适合放置。我不知道为什么。下拉菜单关闭并重新打开后，它会返回并执行相同的操作。我很困惑为什么。

调整窗口大小时移动的CSS嵌套元素

0 个答案: