输入类型文本旁边提交，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>

您可以看到2个输入标签直接排成一行，否则中断会很烦人。 无论如何，这是结果：

那么，这里有什么呢？ 为什么chrome和Safari表现奇怪？ 我尝试了所有方法，将边框，边距和填充重置为0甚至行高。

Answer 1

您可以在input元素中添加vertical-align:top 。 它们是inline元素，因此vertical-align将对其产生影响。 值得注意的是，此属性的默认值为baseline 。 另外，您应该真正使用CSS而不是内联样式。

这里的工作示例

<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>