我写了这个html和css代码：
HTML
<body>
<div id="container">
<div id="containerHeader">
<h1>Seek & enjoy</h1>
<h3>Your movie seeker</h3>
<div id="containerForm">
<form class="form-wrapper cf">
<div id="inputplusbuttons">
<input type="text" placeholder="Find your movie" required>
<div id="containerButtons">
<button id="seek" type="submit">Seek</button>
<button id="reset" type="submit">Reset</button>
</div>
</div>
</form>
</div>
</div>
<div id="results">
<p>
</p>
<div id="movieList">
</div>
<div id="movieDetails">
</div>
</div>
</div>
</body>
我试图将输入放入 div 但失败了并且不知道为什么（CSS 代码位于 JSFiddFiddle 上）。我达到了这两个选项
http://jsfiddle.net/rmkc55zc/ http://jsfiddle.net/rmkc55zc/
http://jsfiddle.net/rmkc55zc/3/ http://jsfiddle.net/rmkc55zc/3/
在选项 1 中，输入宽度为 100%，但输入长度比 div 长。
在选项2中我添加了overflow: hidden但随后输入被切断，我不喜欢这样。
有人知道我可以尝试解决其他问题吗？
Thanks
Add box-sizing: border-box; https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing财产给你的input风格。这result http://jsfiddle.net/rmkc55zc/4/embedded/result/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
