Создание ответного поля ввода между другими элементами

Question

У меня возникли проблемы с вводом моего ввода для реагирования в моем заголовке.

В моем Codepen У меня есть основной заголовок, логотип слева, панель поиска посередине и кнопки навигации справа. Моя цель - заставить панель поиска/ввода посередине реагировать и растягиваться, чтобы заполнить пространство между логотипом и кнопками навигации с некоторым левым/правым краем.

В моих попытках я не смог воспроизвести базовую отчетность ввода, установленную внизу, на 100%.

Как вы подходите к этой проблеме? *

http://codepen.io/leongaban/pen/wIpav

---

Мой вход:

<div class="navigation"> 

<div class="head-search"> 
    This input should be responsive 
    <input class="txtinput" type="text"/> 
    <img src="http://leongaban.com/_stack/images/search_button.png" alt="search"/> 
</div> 

<nav id="user-actions"> 
    <ul> 
     <li class="btn-blue user-action" data-btn="login" data-pane="login">Log In</li> 
     <li class="btn-purple user-action" data-btn="signup" data-pane="signup">Sign Up</li> 
    </ul> 
</nav> 

.navigation { 
    width: auto; float:right; margin:0px; list-style:none; background:#ccc; 
    margin-bottom:20px; 
} 
.head-search { 
    width: auto; 
    float: left; 
} 

.head-search input { 
    float: left; 
    width: 100%; 
    /* max-width: 290px; */ 
    height: 25px; 
    padding: 0 5px; 
    margin: 10px 5px 10px 0; 
} 

Любые советы приветствуются!

Answer 1

Если ваш логотип на левом и навигации по правильному размеру исправила, то вы можете достичь реагирующей панели поиска с помощью следующего кода:

например ваша ширина 150px логотипа и навигация ширина 400px

.navigation { 
    width: 100%; 
    margin:0px 0 20px ; 
    list-style:none; 
    background:#ccc; 
    width:100%; 
} 
.logo{ 
    float:left; 
    width:150px; 
} 
.head-search { 
    position:relative; 
    margin: 0 400px 0 150px; 
} 

.head-search input { 
    float: left; 
    width: 100%; 
    /* max-width: 290px; */ 
    height: 25px; 
    padding: 0 5px; 
    margin: 10px 5px 10px 0; 
} 

#user-actions{ 
    width:400px; 
    float:right; 
} 

Answer 2

Выяснил это!

http://codepen.io/leongaban/pen/fBDhw

мне нужно настройки% от всех элементов в заголовке, логотип, панель поиска и кнопки навигации ... это не самая красивая codepen, но вы должны быть в состоянии увидеть, что я сделал.

Я не могу проверить свой собственный ответ на день, поэтому, если кто-то еще придумает более чистое решение, я проверю их вместо этого!