輸入類型旁邊的文字提交，Y軸偏移

Question

我有這樣的代碼：

<div style='padding: 30px; border: 1px solid #777; width: 500px; height: 500px;'> 
<div style='border: 1px solid #000; width: 260px; height: 26px;'> 
    <form style='margin: 0; padding: 0;'> 
     <input type='text' style='margin: 0; padding: 0; border: 0; background-color: #F88; height: 26px; width: 200px'/><input type='submit' value='' style='margin: 0; padding: 0; border: 0; background-color: #88F; height: 26px; width: 60px'/> 
    </form> 
</div></div> 

您可以將其他在同一行或其他事物突破將創造過程中的空間WACH後直接看到2個輸入標籤，煩人。 反正這是結果：

那麼這裏給人？爲什麼鉻和Safari會表現奇怪？ 我嘗試像所有東西一樣，將邊框，邊距和填充重置爲0甚至行高。

Answer 1

您會將vertical-align:top添加到input元素。他們是inline元素，因此vertical-align會對他們產生影響。值得注意的是，此屬性的默認值爲baseline。另外，你應該真正使用CSS而不是內聯樣式。

WORKING EXAMPLE HERE

<div style='padding: 30px; border: 1px solid #777; width: 500px; height: 500px;'> 
    <div style='border: 1px solid #000; width: 260px; height: 26px;'> 
     <form style='margin: 0; padding: 0;'> 
     <input type='text' style='vertical-align: top; margin: 0; padding: 0; border: 0; background-color: #F88; height: 26px; width: 200px'/><input type='submit' value='' style='vertical-align: top; margin: 0; padding: 0; border: 0; background-color: #88F; height: 26px; width: 60px'/> 
     </form> 
    </div> 
</div>