输入字段调整大小

Question

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

Here's the jsfiddle of my set-up.

Answer 1

您正在通过调用 $('.search2').typeahead 将 input 嵌入到 span 中。此 span 具有 css-class 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;
}

在你的 input 上留下 width: 100%; 没问题！

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

Answer 2

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