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

如果左侧的徽标和右侧尺寸的导航已修复，则您可以使用以下代码实现自适应搜索栏：

e.g。您的徽标宽度为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，但你应该能够看到我做了什么。

我无法检查自己的答案一天，所以如果其他人想出一个更清洁的解决方案，我会检查他们的！

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

2 个答案: