3

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

在我的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;
}

任何和所有提示表示赞赏！

4

2 回答 2

1

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

例如，您的徽标宽度 150 像素和导航宽度 400 像素

.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;
}
于 2013-05-10T06:51:00.603 回答
0

弄清楚了！

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

我需要在标题、徽标、搜索栏和导航按钮中的所有元素上设置 % ......这不是最漂亮的 codepen，但你应该能够看到我做了什么。

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

于 2013-05-09T17:13:32.617 回答