Question

我对如何正确对齐导航栏上的按钮感到困惑，其中按钮被包裹在表单中。

这是我的标记（如果它更容易，这里是一个jsfiddle：https://jsfiddle.net/darrelltunnell/DTcHh/24292/）

<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <span class="navbar-brand">               
                Test               
        </span>
    </div>
    <div id="navbar" class="navbar-collapse collapse">            
        <ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">


                    <li><a href="@menuItem.Path">One</a> </li>
                    <li><a href="@menuItem.Path">Two</a> </li>
                    <li><a href="@menuItem.Path">Three</a> </li>

                     <form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">
                <span class="fa fa-user"></span>
               Daz
            </a>
        </li>
        <li>
            <button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">Logout</button>
        </li>
    </ul>
</form>


        </ul>
    </div>
</div>

问题是锚点和按钮（表单内）都没有与其他导航项正确对齐。

任何指针都非常赞赏。

Answer 1

您应该使用<ul>标记，如下所示：

<ul>
  <li>Item1</li>
  <li>Item2</li>
</ul>

<ul>
  <li>Item3</li>
  <li>Item4</li>
</ul>

您的密码：

<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <span class="navbar-brand"> Test </span>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">

                <li>
                    <a href="@menuItem.Path">One</a>
                </li>
                <li>
                    <a href="@menuItem.Path">Two</a>
                </li>
                <li>
                    <a href="@menuItem.Path">Three</a>
                </li>
            </ul>
            <form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> <span class="fa fa-user"></span> Daz </a>
                    </li>
                    <li>
                        <button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">
                            Logout
                        </button>
                    </li>
                </ul>
            </form>

            </ul>
        </div>
    </div>
</nav>

导航栏中的“对齐表单”按钮

1 个答案: