搜索欄未在導航欄中對齊

由於某種原因我的正在擴展搜索欄無法與我的導航欄上的其他項目正確對齊。它在頂部顯示，而登錄和註銷被推到下面。我希望他們都像一個新的堆棧溢出導航欄。問題是什麼？搜索欄未在導航欄中對齊

CSS和HTML如下所示：

body { 
 
    padding-top: 65px; 
 
} 
 

 
.search-form .form-group { 
 
    float: right !important; 
 
    transition: all 0.35s, border-radius 0s; 
 
    width: 32px; 
 
    height: 32px; 
 
    background-color: #fff; 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
 
    border-radius: 25px; 
 
    border: 1px solid #ccc; 
 
} 
 
.search-form .form-group input.form-control { 
 
    padding-right: 20px; 
 
    border: 0 none; 
 
    background: transparent; 
 
    box-shadow: none; 
 
    display:block; 
 
} 
 
.search-form .form-group input.form-control::-webkit-input-placeholder { 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control:-moz-placeholder { 
 
    /* Firefox 18- */ 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control:-ms-input-placeholder { 
 
    display: none; 
 
} 
 
.search-form .form-group:hover, 
 
.search-form .form-group.hover { 
 
    width: 100%; 
 
    border-radius: 4px 25px 25px 4px; 
 
} 
 
.search-form .form-group span.form-control-feedback { 
 
    position: absolute; 
 
    top: -1px; 
 
    right: -2px; 
 
    z-index: 2; 
 
    display: block; 
 
    width: 34px; 
 
    height: 34px; 
 
    line-height: 34px; 
 
    text-align: center; 
 
    color: #3596e0; 
 
    left: initial; 
 
    font-size: 14px; 
 
}

<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Linkin Park</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link0 <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link1</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <div class="form-group"> 
 
      <form action="" class="search-form"> 
 
       <div class="form-group has-feedback"> 
 
      \t \t <label for="search" class="sr-only">Search</label> 
 
      \t \t <input type="text" class="form-control" name="search" id="search" placeholder="search"> 
 
       \t \t <span class="glyphicon glyphicon-search form-control-feedback"></span> 
 
      \t </div> 
 
      </form> 
 
     </div> 
 
      <li><a href="#">Sign In</a></li> 
 
      <li><a href="#">Sign Out</a></li> 
 

 

 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

非常感謝你非常非常事先！ :-D

來源

2017-02-17 The_Pythonist

你爲什麼要在UL的內聯元素採用div？我想你想讓你的搜索欄在「退出」下面嗎？ – dutchsociety

沒有。我希望它在一條直線上，就像Stackover流量導航欄一樣。 –

你忘了內<li></li>包裹格。

工作片斷

body { 
 
    padding-top: 65px; 
 
} 
 
.form-group { 
 
padding-top:10px; 
 
} 
 
.search-form .form-group { 
 
    float: right !important; 
 
    transition: all 0.35s, border-radius 0s; 
 
    width: 32px; 
 
    height: 32px; 
 
    background-color: #fff; 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
 
    border-radius: 25px; 
 
    border: 1px solid #ccc; 
 
} 
 
.search-form .form-group input.form-control { 
 
    padding-right: 20px; 
 
    border: 0 none; 
 
    background: transparent; 
 
    box-shadow: none; 
 
    display:block; 
 
} 
 
.search-form .form-group input.form-control::-webkit-input-placeholder { 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control:-moz-placeholder { 
 
    /* Firefox 18- */ 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control:-ms-input-placeholder { 
 
    display: none; 
 
} 
 
.search-form .form-group:hover, 
 
.search-form .form-group.hover { 
 
    width: 100%; 
 
    border-radius: 4px 25px 25px 4px; 
 
} 
 
.search-form .form-group span.form-control-feedback { 
 
    position: absolute; 
 
    top: -1px; 
 
    right: -2px; 
 
    z-index: 2; 
 
    display: block; 
 
    width: 34px; 
 
    height: 34px; 
 
    line-height: 34px; 
 
    text-align: center; 
 
    color: #3596e0; 
 
    left: initial; 
 
    font-size: 14px; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Linkin Park</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link0 <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link1</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li id="sear"><div class="form-group"> 
 
      <form action="" class="search-form"> 
 
       <div class="form-group has-feedback"> 
 
      \t \t <label for="search" class="sr-only">Search</label> 
 
      \t \t <input type="text" class="form-control" name="search" id="search" placeholder="search"> 
 
       \t \t <span class="glyphicon glyphicon-search form-control-feedback"></span> 
 
      \t </div> 
 
      </form> 
 
     </div></li> 
 
      <li><a href="#">Sign In</a></li> 
 
      <li><a href="#">Sign Out</a></li> 
 

 

 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

來源

2017-02-17 15:33:41 neophyte

它似乎現在對齊了，但是當你懸停或使用搜索欄，因爲它展開，項目（登錄＆註銷）被推下，然後展開：/ –

@The_Pythonist但在我的代碼段它工作正常看看它。 – neophyte

這是移動視圖，顯示在您的代碼段中。但在桌面瀏覽器中，它看起來不同。 –

看看這個，搜索表單和'登錄'，'退出'鏈接在一行。我已經改變了你的HTML位，因爲標籤無法保存標籤。

body { 
 
    padding-top: 65px; 
 
} 
 
.search-form-holder { 
 
\t margin: 0; 
 
\t padding-top: 10px; 
 
} 
 
.search-form .form-group { 
 
    float: right !important; 
 
    transition: all 0.35s, border-radius 0s; 
 
    width: 32px; 
 
    height: 32px; 
 
    background-color: #fff; 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
 
    border-radius: 25px; 
 
    border: 1px solid #ccc; 
 
} 
 
.search-form .form-group input.form-control { 
 
    padding-right: 20px; 
 
    border: 0 none; 
 
    background: transparent; 
 
    box-shadow: none; 
 
    display:block; 
 
} 
 
.search-form .form-group input.form-control::-webkit-input-placeholder { 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control:-moz-placeholder { 
 
    /* Firefox 18- */ 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    display: none; 
 
} 
 
.search-form .form-group input.form-control:-ms-input-placeholder { 
 
    display: none; 
 
} 
 
.search-form .form-group:hover, 
 
.search-form .form-group.hover { 
 
    width: 100%; 
 
    border-radius: 4px 25px 25px 4px; 
 
} 
 
.search-form .form-group span.form-control-feedback { 
 
    position: absolute; 
 
    top: -1px; 
 
    right: -2px; 
 
    z-index: 2; 
 
    display: block; 
 
    width: 34px; 
 
    height: 34px; 
 
    line-height: 34px; 
 
    text-align: center; 
 
    color: #3596e0; 
 
    left: initial; 
 
    font-size: 14px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Linkin Park</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link0 <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link1</a></li> 
 
     </ul> 
 
     <div class="form-group navbar-right search-form-holder"> 
 
     <form action="" class="search-form"> 
 
      <div class="form-group has-feedback"> 
 
      <label for="search" class="sr-only">Search</label> 
 
      <input type="text" class="form-control" name="search" id="search" placeholder="search"> 
 
       <span class="glyphicon glyphicon-search form-control-feedback"></span> 
 
      </div> 
 
     </form> 
 
    </div> 
 
\t \t \t <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Sign In</a></li> 
 
      <li><a href="#">Sign Out</a></li> 
 
\t \t \t </ul> 
 

 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

來源

2017-02-17 15:33:27

搜索欄未在導航欄中對齊

回答

相關問題