<span/> 带有 HTML enter 的字段与没有 HTML enter 的字段给出不同的宽度/边距

Posted 2023-03-06

【中文标题】<span/> 带有 HTML enter 的字段与没有 HTML enter 的字段给出不同的宽度/边距

【英文标题】：<span/> field with HTML enter gives different width/margin than withouth HTML enter

【发布时间】：2013-08-19 18:16:16

【问题描述】：

以下代码：

<span style="display:inline-block;width:200px;">Selectiedatum</span>
<input type="text" value="30-06-2013" style="width:100px;text-align: right;" />

提供与以下不同的输出：

<span style="display:inline-block;width:200px;">Selectiedatum</span><input type="text" value="30-06-2013" style="width:100px;text-align: right;" />

是的，唯一的区别是 html 输入...

查看http://jsfiddle.net/Et4WZ/

问题是这段代码是由 ASP.net 创建的；我不能只是简单地添加或删除 HTML 输入。

为什么会发生这种情况，我该如何解决？

【问题讨论】：

任何数量的空白在两个内联元素之间时都会呈现为单个空格。

谢谢 Blender，你说得对。

【参考方案1】：

Blender 是对的。

我通过添加一个带有 1 个空格的 span 字段来修复它：

<span> </span>

所以：

<span style="display:inline-block;width:200px;">Selectiedatum</span><span> </span><input type="text" value="30-06-2013" style="width:100px;text-align: right;" />