在提交旁边输入类型文本，Y 偏移

【问题标题】：Input type text next to submit, Y offset在提交旁边输入类型文本，Y 偏移
【发布时间】：2014-01-30 03:13:12
【问题描述】：

我有这个代码：

<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 甚至行高。

【问题讨论】：

标签： html css text input submit

【解决方案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>

【讨论】：

啊，是的，谢谢。我只是在这里使用内联 css 来展示它。