導航欄中導航欄元素的垂直對齊問題

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規則。 進行相應的調整，直到與您希望在其上查看網站的所有瀏覽器上的容器的菜單最一致。