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

Question

我需要使用select / options标签显示以下内容 1月1日） 二月（2） 三月（3） 。 。 。 十二月（12）

如何在月份和号码之间留出空间？我尝试了使用，emsp，ensp，thinsp，但是当我在Firefox和Chrome中打开它时，空间不同。两个浏览器中的空间必须相等。

我怎样才能实现它？

感谢。

Answer 1

如果包含正常空格的<option>January (1)</option>在不同情况下具有不同的间距，则这是由使用不同的字体引起的。空格的宽度因字体而异。所以你需要设置option元素的字体;最安全的做法是在select元素上设置该字体，因为有些浏览器不允许直接设置option元素，只能通过select。

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

Answer 2

以下两种方法可以将月份名称和月份数字排成两列，就好像它们是表格列一样。

<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和＆amp;歌剧：

Answer 3

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

Answer 4

使用＆amp;使用其中的许多内容，直到对结果满意为止