我有这个代码:
<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 甚至行高。
最佳答案
您可以将 vertical-align:top
添加到 input
元素。它们是 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>
关于html - 提交旁边的输入类型文本,Y 偏移量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21447110/