Html 文本字段和按钮未在Chrome中保持内联

我遇到了一个与css/html相关的问题，这让我非常恼火：(

我有一个600像素的div 宽度为500px的输入文本字段 宽度为100px的按钮

<div id="search">
     <input type="text" id="search_bar" class="search_bar" name="q"/>
     <button id="search_videos" class="cool_button">Search</button>
</div>

搜寻

按钮和输入标记有一组CSS3属性 在firefox中似乎很好，但是在Chrome中按钮会转到下一行。是否有一个CSS我没有调整宽度，所以它总是保持内联？ 谢谢

编辑：

小提琴在这里：）

---

您当前的宽度是521px，而不是500px。这是因为必须同时添加宽度和填充值才能获得最终宽度=500px+0.4em x 2（左填充和右填充）。

---

如果您将输入宽度设置为479px，这将得到解决。

实际上，web浏览器有时在实现不同属性方面有所不同。 这里的问题可能是由于元素的填充属性造成的。

---

因此，要使其正常工作，您应该尝试减少一个输入或按钮元素的宽度，或者简单地增加“div”标记的宽度。

您可以发布CSS吗？或者最好是一把小提琴。很难猜测是什么css属性触发了换行。在大多数框模型渲染中，边框计算为宽度，因此您需要考虑到这一点。你的宽度实际上是604px，因为按钮两边都有边框。。。