html - 在其他元素之间创建响应式输入字段

Question

无法让我的搜索输入在我的标题中做出响应。

在我的 Codepen 我有一个基本的标题，左边是 Logo ，中间是搜索栏，右边是导航按钮。我的目标是让中间的搜索/输入栏响应并拉伸(stretch)以填充 Logo 和导航按钮之间的空间，并留有一些左右边距。

在我的尝试中，我无法复制底部输入设置为 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;
}