在选项标签内的两个文本之间添加空格答案

【问题标题】：Add space between two text inside an options tag在选项标签内的两个文本之间添加空格
【发布时间】：2015-01-13 10:00:21
【问题描述】：

我需要使用选择/选项标签显示以下内容 1月1日）二月 (2) 三月 (3) . . . 十二月（12）

如何在月份和数字之间留出空格？我试过使用 nbsp 、 emsp 、 ensp 、 thinsp ，但是当我在 Firefox 和 chrome 中打开它时，空间会有所不同。两个浏览器中的空间需要相等。

我怎样才能实现它？

谢谢。

【问题讨论】：

"两个浏览器的空间需要相等。" - 为什么？该网站的用户是否会如此关注微小的像素差异，或者这是某种形式的像素完美复制作为您的客户的要求？不管怎样，我不确定这是否足够值得担心。
嗨大卫，我的要求很简单，只要考虑一个类似表格的结构，其中所有月份在一个列中，所有对应的数字在另一列中。如果您只是想象一下，月份及其数字之间的间距将相等。为了实现这种形式，我尝试将 , &thsp;在月份和它的数字之间，并使用 chrome 使其看起来对齐。但是当我使用 Firefox 打开相同的文件时，数字不按顺序排列。

标签： html browser option

【解决方案1】：

这里有两种方法可以让月份名称和月份数字排成两列，就像它们是表格列一样。

<select>
<option>--Choose Month--</option>
<option value="1">01 (January)</option>
<option value="2">02 (February)</option>
<option value="3">03 (March)</option>
<option value="4">04 (April)</option>
<option value="5">05 (May)</option>
<option value="6">06 (June)</option>
<option value="7">07 (July)</option>
<option value="8">08 (August)</option>
<option value="9">09 (September)</option>
<option value="10">10 (October)</option>
<option value="11">11 (November)</option>
<option value="12">12 (December)</option>
</select>
&nbsp;&nbsp;
<select style="font-family: monospace">
<option>--Choose Month--</option>
<option value="1">January&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</option>
<option value="2">February&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)</option>
<option value="3">March&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(3)</option>
<option value="4">April&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(4)</option>
<option value="5">May&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(5)</option>
<option value="6">June&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(6)</option>
<option value="7">July&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(7)</option>
<option value="8">August&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(8)</option>
<option value="9">September&nbsp;&nbsp;&nbsp;&nbsp;(9)</option>
<option value="10">October&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(10)</option>
<option value="11">November&nbsp;&nbsp;&nbsp;&nbsp;(11)</option>
<option value="12">December&nbsp;&nbsp;&nbsp;&nbsp;(12)</option>
</select>

在 Chrome、Firefox、IE、Safari 和 Opera 中生成的下拉菜单如下所示：

【讨论】：

【解决方案2】：

如果<option>January (1)</option>，包含一个正常的空格，在不同的情况下有不同的间距，这是由于使用了不同的字体造成的。空格的宽度因字体而异。所以你需要设置option元素的字体；在select 元素上设置该字体也是最安全的，因为有些浏览器不允许您直接设置option 元素的样式，只能通过select。

为了获得最大的兼容性，您需要使用带有@font-face 的可下载字体。

【讨论】：

【解决方案3】：

使用在月份名称和数字之间的标签中。您可以根据需要使用任意数量的空间。删除 & 和 nbsp; 之间的空格在代码中。

【讨论】：

【解决方案4】：

使用&nbsp，多次使用，直到满意为止

【讨论】：