Question

我有一个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元素的内容，但是当我单击下拉列表并查看选项时，填充消失了。是否有一个特殊的字符我应该使用而不是空格，或者填充值？

Answer 1

如果通过填充＆＃39;你的意思是你希望角色与示例中的角色一致，你可以在角色前尝试$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

选择框说“＆＃34;沃尔沃＆＃34; （初始值）是样式化的，但是当您单击它以选择一个选项时，您将看到默认的下拉选择。这是因为它由浏览器处理而不是使用CSS呈现。

Answer 2

为什么填充空格在我的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?（用于替代解决方案）。

Answer 3

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

另见：

Answer 4

使用 等效的空格或使用CSS

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

为什么填充空格在我的`select`元素中丢失了？

4 个答案: