为什么我的“选择”元素中缺少填充空间？答案

【问题标题】：Why are padding spaces lost in my `select` element?为什么我的“选择”元素中缺少填充空间？
【发布时间】：2015-10-26 02:42:21
【问题描述】：

我有一个select，下面是漂亮的 html：

<select name="BundleId" readonly="readonly">
    <option value=""> - select a bundle - </option>
    <option value="DD62163A-B3D8-40DE-B033-C15B92D75222">  10 pts: R20</option>
    <option value="96B091D0-84DA-4F40-BBFE-3B04148C150E">  20 pts: R30</option>
    <option value="BDFEB546-2EF4-4E04-8B1E-4CD161FFC04A">  50 pts: R60</option>
    <option value="D0F1BEE6-1EB3-494C-948A-295C2C311900"> 100 pts: R110</option>
</select>

注意我是如何在服务器端填充option 元素的内容的，但是当我单击下拉列表并查看选项时，填充消失了。有没有我应该使用的特殊字符来代替空格，或者用值填充？

【问题讨论】：

你试过&nbsp 吗？
这发生在任何元素中的任何空白处。它根本没有在 HTML 中以这种方式使用。试试这个例子：<p> <-- whole lot of spaces</p> 如果有的话，这些空格将显示为一个空格。我相信&nbsp; 也会发生这种情况。

标签： html

【解决方案1】：

为什么我的select 元素中缺少填充空格？

HTML specification 定义应忽略开始标记之后或结束标记之前的空格：

为了避免 SGML 换行规则的问题和现有实现之间的不一致，作者不应依赖用户代理在开始标记之后或结束标记之前立即呈现空白。

还有其他方法可以对 HTML 中的空格进行编码并使它们不折叠，例如&emsp;。见http://dev.w3.org/html5/html-author/charref。

相关：How to preserve whitespace in dynamically added javascript DOM element without using CSS?（用于替代解决方案）。

【讨论】：

感谢您的鼓舞人心的回答。是的，第一个链接很棒；我已经为第一个链接添加了醒目的书签，以备将来使用。我的服务器端填充现在是：PadLeft(4, HtmlChars.Entities[HtmlEntities.Numsp].Char)，其中Char 计算为字符0x2007。在我的 Razor 视图中，我可以使用 HtmlChars.Entities[HtmlEntities.Numsp].Html，它的计算结果为字符串 &numsp;。现在开始扩展HtmlChars.Entities 字典。

【解决方案2】：

如果通过“填充”表示您希望字符像示例中那样排列，您可以在字符前尝试$nbsp;。

例子：

<option value="DD62163A-B3D8-40DE-B033-C15B92D75222">&nbsp;&nbsp;10 pts: R20</option>
<option value="96B091D0-84DA-4F40-BBFE-3B04148C150E">&nbsp;&nbsp;20 pts: R30</option>
<option value="BDFEB546-2EF4-4E04-8B1E-4CD161FFC04A">&nbsp;&nbsp;50 pts: R60</option>
<option value="D0F1BEE6-1EB3-494C-948A-295C2C311900">&nbsp;100 pts: R110</option>

如果您尝试通过 CSS 执行此操作，则只能将填充添加到 select 框，而不是单击下拉框时出现的列表。

View an example of this on Codepen

显示“Volvo”（初始值）的选择框是有样式的，但是当您单击它选择一个选项时，您会看到默认的下拉选择。这是因为它是由浏览器处理的，而不是用 CSS 渲染的。

【讨论】：

【解决方案3】：

在 HTML 中，多个连续的空白字符被规范化为一个空格。使用&nbsp; 作为不间断空格来防止这种情况，并保持必要的间距。

另见：

【讨论】：

【解决方案4】：

使用&nbsp;它相当于一个空格或使用CSS

option{ padding-left: 2px /* or whatever value */ }

【讨论】：

我很想使用 CSS，但空格是固定长度数字的填充，因此在不同的 option 元素之间会有所不同。
你不能将不同的类附加到特定的选项元素上吗？
我觉得这是一个非常不切实际的解决方案。虽然数字格式毕竟是一个演示问题，但为不同长度的数字设置不同的类只会在硬编码option 元素的情况下有所帮助，我真的不喜欢这种情况。或者，您可以复杂化生活并使用客户端脚本根据其内容为每个选项添加正确的类