在选项标签内的两个文本之间添加 space

Question

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

如何在月份和数字之间给出 space？我尝试使用 usng nbsp 、 emsp 、 ensp 、 thinsp 但是当我在 Firefox 和 chrome 中打开它时 space 不同。 space 在两个浏览器中需要相等。

如何实现？

谢谢。

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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

<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 中如下所示：

在选项标签内的两个文本之间添加 space

Add space between two text inside an options tag

html

browser

option