输入字段调整大小

Question

我在调整搜索输入栏的大小时遇到​​了问题。当浏览器窗口变小时，我已经设法使用width:100%; 重新调整大小。但是如果不使其始终为 300px，我无法将起始宽度设为 300px，然后它会在调整大小时超出父 div。出于某种原因，它是 185 像素；

Here's the jsfiddle of my set-up.

Answer 1

您正在通过调用$('.search2').typeahead 将input 嵌入到span。这个span 有css 类twitter-typeahead，它没有设置为width: 100%;

将此添加到您的 CSS：

.twitter-typeahead {width: 100%;}

然后你需要把你的 div 容器 css 改成这个（width: 100%; max-width: 300px;）：

.div2 {
  float: left;
  width: 100%;
  max-width: 300px;
  padding-left: 20px;
}

将width: 100%; 留在您的input 上很好！

查看工作代码：http://jsfiddle.net/utg4mh6z/1/

Answer 2

只需删除所有float: left; 即可。看来它们无论如何都不是必需的。至少你没有在任何地方声明它，从我的角度来看，浮动 100% 宽度的元素是没有意义的。