Выравнивание элементов в navbar

Question

Я пытаюсь реализовать небольшую навигационную панель с панелью поиска и логином. Моя проблема в том, что обычно я бы использовал display:flex, но на этот раз я хочу попробовать что-то еще. Итак, я решил дать свой <li> -Интеграции имущество display:inline, что, конечно, не сработает для меня.

CSS:

* { 
    margin:0; 
    box-sizing:border-box; 
} 
html { 
    display:block; 
} 
body { 

    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 
    line-height: 1.42857143; 

} 

a { 
    color: #00B7FF; 
} 
.navbar-default { 
    position:relative; 
    min-height: 50px; 
    background-color: #f8f8f8; 
    border-color: #e7e7e7; 
} 

.container-fluid { 
    padding-right:30px; 
    padding-left:30px; 
    margin-left:auto; 
    margin-right:auto; 
} 

.navbar-default ul { 
    list-style: none; 
    display:inline; 
} 

.navbar-default li { 
    display:inline; 
} 

HTML:

<nav class="navbar-default"> 
    <div class="container-fluid"> 
     <ul class="navbar-default nav"> 
      <li> 
       <div id="search" class="search-navbar"> 
        <input type="search"> 
        <input type="button" value="Search"> 
       </div> 
      </li> 
      <li> 
       <div id="login" class="login-navbar"> 
        <input type="text"> 
        <input type="password"> 
        <input type="button" value="Sign in"> 
       </div> 
      </li> 
     </ul> 
    </div> 
</nav> 

Вот рабочая скрипку: https://jsfiddle.net/rvfd5h5e/

То, что я хочу, чтобы поместить поиск-бар слева (но не на краю) и логин справа.

Я надеюсь, что кто-то может помочь мне с этим.

Answer 1

Попробуйте это с помощью display:inline-block и float:right

CSS

.navbar-default ul { 
    list-style: none; 
    display:block; 
    clear: both; 
    line-height: 3em; 
} 
.navbar-default li, .navbar-default li div { 
    display:inline-block; 
} 
.navbar-default li:last-child { 
    float: right; 
} 

DEMO HERE

Answer 2

Вы можете сделать свой дисплей встроенный блок, так что не добавляет перерыв.

.navbar-default li { 
    display:inline-block; 
} 

jsfiddle

Answer 3

Добавить display:inline в оба <div>

Answer 4

вы можете это CSS:

width: 50%; 
float: left; 
display: inline; 

для DIV внутри первого литий и

display: inline; 
float: right; 

выше css для div in second li