html - 文本字段和按钮不会在 Chrome 中保持内联

Question

我有一个 css/html 相关的问题，这让我很烦 :(

我有一个 600px 的 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 来调整宽度以使其始终保持内联？ 谢谢

编辑:

这是 fiddle :)

http://jsfiddle.net/eGyRU/

Answer 1

您当前的宽度是 521 像素，而不是 500 像素。发生这种情况是因为您必须同时添加宽度和填充值以获得最终宽度 = 500px + 0.4em x 2(左右填充)。 设置输入宽度为479px即可解决。