對齊導航菜單旁邊的搜索欄

Question

我想調整導航菜單旁邊的搜索欄。我使用float:right;將它移到右側，但無論使用填充和/或頁邊距，搜索欄似乎最終都會在導航菜單的下一行。我在這裏錯過了什麼？下面

是我的代碼：

.nav-bar { 
 
    max-height: 0; 
 
    margin-left: 0; 
 
    padding-left: 20px; 
 
    padding-top: 200px; 
 
    width: 80%; 
 
} 
 

 
.box-nav-bar ul { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin: 0; 
 
} 
 

 
.box-nav-bar ul li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    outline: 1px solid grey; 
 
    width: 100px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.box-nav-bar ul li a { 
 
    text-decoration: none; 
 
    list-style: none; 
 
    color: black; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    font-family: Arial; 
 
    display: block; 
 
} 
 

 
.box-nav-bar ul li:hover { 
 
    background-color: grey; 
 
} 
 

 
.box-nav-bar ul .sub-menu ul li { 
 
    text-decoration: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    width: 150px; 
 
} 
 

 
.box-nav-bar ul .sub-menu { 
 
    display: none; 
 
    font-size: 14px; 
 
    position: absolute; 
 
    text-align: center; 
 
    left: 0; 
 
    top: 100%; 
 
} 
 

 
.box-nav-bar li:hover .sub-menu { 
 
    display: block; 
 
} 
 

 
.sub-menu li { 
 
    width: 100% !Important; 
 
} 
 

 
.sub-menu li:hover .sub-sub-menu { 
 
    display: block !important; 
 
} 
 

 
.sub-sub-menu { 
 
    display: none !important; 
 
    font-size: 14px; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 0; 
 
    left: 100%; 
 
} 
 

 
.box-nav-bar li:hover .sub-menu li:hover { 
 
    display: block; 
 
} 
 

 
.sub-sub-menu li { 
 
    width: 100% !important; 
 
    display: block !important; 
 
    padding: 20px !important; 
 
} 
 

 
.search-form { 
 
    float: right; 
 
    text-align: right; 
 
}

<div class="nav-bar"> 
 
    <nav class="box-nav-bar"> 
 
    <ul> 
 
     <li> <a href="/Home">HOME</a></li> 
 
     <li> <a href="/Home">ABOUT</a></li> 
 
     <li> <a href="/Home">SERVICES</a> 
 
     <ul class="sub-menu"> 
 
      <li> 
 
      <a href="#">Lorem ipsum</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Dolor sit amet </a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Conse ctetur </a> 
 
      <ul class="sub-sub-menu"> 
 
       <li> 
 
       <a href="#">Latest</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Archive</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href="/Home">PROJECTS</a></li> 
 
     <li> <a href="/Home">CONTACTS</a></li> 
 
    </ul> 
 
    </nav> 
 
    <form class="search-form" action="search.php" method="GET" accept-charset="utf-8"> 
 
    <label class="search-form_label"> 
 
       <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder=""/> 
 
       <span class="search-form_liveout"></span> 
 
       </label> 
 
    <button class="search-form_submit fa-search" type="submit">search</button> 
 
    </form> 
 
</div>

謝謝。

Answer 1

只需添加display:inline-block;到.box的-導航欄，以防止它走的是父母的整個寬度

注意，這隻能在更大的屏幕上工作

.nav-bar { 
 
    max-height: 0; 
 
    margin-left: 0; 
 
    padding-left: 20px; 
 
    padding-top: 200px; 
 
    width: 80%; 
 
} 
 

 
.box-nav-bar ul { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin: 0; 
 
} 
 

 
.box-nav-bar ul li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    outline: 1px solid grey; 
 
    width: 100px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.box-nav-bar ul li a { 
 
    text-decoration: none; 
 
    list-style: none; 
 
    color: black; 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    font-family: Arial; 
 
    display: block; 
 
} 
 

 
.box-nav-bar ul li:hover { 
 
    background-color: grey; 
 
} 
 

 
.box-nav-bar ul .sub-menu ul li { 
 
    text-decoration: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    width: 150px; 
 
} 
 

 
.box-nav-bar ul .sub-menu { 
 
    display: none; 
 
    font-size: 14px; 
 
    position: absolute; 
 
    text-align: center; 
 
    left: 0; 
 
    top: 100%; 
 
} 
 

 
.box-nav-bar li:hover .sub-menu { 
 
    display: block; 
 
} 
 

 
.sub-menu li { 
 
    width: 100% !Important; 
 
} 
 

 
.sub-menu li:hover .sub-sub-menu { 
 
    display: block !important; 
 
} 
 

 
.sub-sub-menu { 
 
    display: none !important; 
 
    font-size: 14px; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 0; 
 
    left: 100%; 
 
} 
 

 
.box-nav-bar li:hover .sub-menu li:hover { 
 
    display: block; 
 
} 
 

 
.sub-sub-menu li { 
 
    width: 100% !important; 
 
    display: block !important; 
 
    padding: 20px !important; 
 
} 
 

 
.search-form { 
 
    float: right; 
 
    text-align: right; 
 
} 
 

 
.box-nav-bar { 
 
    display: inline-block; 
 
}

<div class="nav-bar"> 
 
    <nav class="box-nav-bar"> 
 
    <ul> 
 
     <li> <a href="/Home">HOME</a></li> 
 
     <li> <a href="/Home">ABOUT</a></li> 
 
     <li> <a href="/Home">SERVICES</a> 
 
     <ul class="sub-menu"> 
 
      <li> 
 
      <a href="#">Lorem ipsum</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Dolor sit amet </a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Conse ctetur </a> 
 
      <ul class="sub-sub-menu"> 
 
       <li> 
 
       <a href="#">Latest</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Archive</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href="/Home">PROJECTS</a></li> 
 
     <li> <a href="/Home">CONTACTS</a></li> 
 
    </ul> 
 
    </nav> 
 
    <form class="search-form" action="search.php" method="GET" accept-charset="utf-8"> 
 
    <label class="search-form_label"> 
 
       <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder=""/> 
 
       <span class="search-form_liveout"></span> 
 
       </label> 
 
    <button class="search-form_submit fa-search" type="submit">search</button> 
 
    </form> 
 
</div>

Answer 2

把<form>內<nav>

<nav class="box-nav-bar"> 
    <ul> 
     <li> <a href="/Home">HOME</a></li> 
     <li> <a href="/Home">ABOUT</a></li> 
     <li> <a href="/Home">SERVICES</a> 
     <ul class="sub-menu"> 
      <li> 
      <a href="#">Lorem ipsum</a> 
      </li> 
      <li> 
      <a href="#">Dolor sit amet </a> 
      </li> 
      <li> 
      <a href="#">Conse ctetur </a> 
      <ul class="sub-sub-menu"> 
       <li> 
       <a href="#">Latest</a> 
       </li> 
       <li> 
       <a href="#">Archive</a> 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li> <a href="/Home">PROJECTS</a></li> 
     <li> <a href="/Home">CONTACTS</a></li> 
    </ul> 
    <form class="search-form" action="search.php" method="GET" accept-charset="utf-8"> 
    <label class="search-form_label"> 
       <input class="search-form_input" type="text" name="s" autocomplete="off" placeholder=""/> 
       <span class="search-form_liveout"></span> 
       </label> 
    <button class="search-form_submit fa-search" type="submit">search</button> 
    </form> 
    </nav>