导航栏中导航栏元素的垂直对齐问题

Question

我有一个用引导程序创建的非常简单的导航栏，如下所示。 我的问题是，左边的3个项目对齐得很好（水平：左侧，垂直：中央）。 但是，出于某种原因，将右对齐的项目粘贴到导航栏的顶部。 关于如何使它们垂直对齐中心的任何提示将不胜感激。

@using (Html.BeginForm("SearchName", "Home", FormMethod.Post))
{
    <div class="container">
        <nav class="navbar navbar-default navbar-inverse">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li><a href="/" class="glyphicon glyphicon-book"></a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/ContactUs">Contact us</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li id="custom-search-input">
                        <input type="text" id="SearchTerm" name="SearchTerm" class="form-control input-sm" placeholder="Search by Name/Profession" />
                    </li>
                    <li>
                        <span class="input-group-btn">
                            <button class="btn btn-info btn-sm" type="submit">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </span>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
}

Answer 1

一个简单的解决方法是删除整个内容，包括以下内容的内部标记：

<ul class="nav navbar-nav navbar-right">

并替换为：

<form class="navbar-form navbar-right" role="search">
      <div class="form-group">
           <input type="text" id="SearchTerm" name="SearchTerm" class="form-control input-sm" placeholder="Search by Name/Profession" />
      </div>

       <button type="submit" class="btn btn-default">Search</button>
</form>

Answer 2

对元素ul.nav.navbar-nav.navbar-right使用上边距CSS规则。 进行相应的调整，直到与您希望在其上查看网站的所有浏览器上的容器的菜单最一致。