Question

我正在尝试更改网站上电话号码扩展名dropdown的外观。它不是所有文本都是不均匀间隔的，而是在扩展名之间隔开。

例如：

(+43) Austria
(+353) Ireland
(+1) United States

会变成：

(+43)  Austria
(+353) Ireland
(+1)   United States

我尝试过简单的空格（如 ）并尝试将（+ XX）和国家/地区名称分开，但无效。

空格无效，而 和跨度只是显示为其编写的代码。有没有办法格式化下拉列表以使其工作？下面是HTML的示例（国家列表很广泛）：

    <select class="countryCodeForMobile valid" id="countryCodeForMobile" name="countryCode">
    <option value="+61">(+61) Australia</option>
    <option value="+43">(+43) Austria</option>
    <option value="+32">(+32) Belgium</option>
    <option value="+55">(+55) Brazil</option>
    <option value="+1">(+1) Canada</option>
    <option value="+33">(+33) France</option>
    <option value="+49">(+49) Germany</option>
    <option value="+353">(+353) Ireland</option>
    <option value="+39">(+39) Italy</option>
    <option value="+31">(+31) Netherlands </option>
    <option value="+64">(+64) New Zealand</option>
    <option value="+48">(+48) Poland</option>
    <option value="+351">(+351) Portugal</option>
    <option value="+27">(+27) South Africa</option>
    <option value="+34">(+34) Spain</option>
    <option value="+41">(+41) Switzerland</option>
    <option selected="selected" value="+44">(+44) United Kingdom</option>
    <option value="+1">(+1) United States</option>
    </select>

Answer 1

您只需使用nbsp;格式化<option>内的文字，因为我们在<option>内不能包含任何其他HTML元素，并将css应用于这些元素并获得预期结果。

 <select class="countryCodeForMobile valid" id="countryCodeForMobile" name="countryCode">
    <option value="+61">(+61)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Australia</option>
    <option value="+43">(+43)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Austria</option>
    <option value="+32">(+32)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Belgium</option>
    <option value="+55">(+55)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Brazil</option>
    <option value="+1">(+1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Canada</option>
    <option value="+33">(+33)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; France</option>
    <option value="+49">(+49)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Germany</option>
    <option value="+353">(+353)&nbsp;&nbsp;&nbsp; Ireland</option>
    <option value="+39">(+39)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Italy</option>
    <option value="+31">(+31)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Netherlands </option>
    <option value="+64">(+64)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; New Zealand</option>
    <option value="+48">(+48)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Poland</option>
    <option value="+351">(+351)&nbsp;&nbsp;&nbsp; Portugal</option>
    <option value="+27">(+27)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; South Africa</option>
    <option value="+34">(+34) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Spain</option>
    <option value="+41">(+41)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Switzerland</option>
    <option selected="selected" value="+44">(+44)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; United Kingdom</option>
    <option value="+1">(+1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;United States</option>
    </select>

Answer 2

由于您在问题中使用了JQuery标记，我认为它已被使用。这是一个动态插入 以便维护格式的函数。如果您愿意，您可以将输出并硬编码到您的网页中，这样每次都不需要运行相同的计算。但是这样，如果你更新信息，它会自动调整。

＆＃13;

var number_of_spaces = 7;

$("#countryCodeForMobile option").each(function(){

  var codelength = $(this).attr("value").length + 2; //2 Added for brackets.
  var value = $(this).html();
  var code = value.slice(0,codelength)
  var country = value.slice(codelength+1);
  var number_of_nbsps = number_of_spaces - code.length;
  var final = code;
  for (var i=0; i<number_of_nbsps; i ++) 
  {
  final = final + "&nbsp;&nbsp;"
  }
  final = final + country;
  $(this).html(final);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="countryCodeForMobile valid" id="countryCodeForMobile" name="countryCode">
    <option value="+61">(+61) Australia</option>
    <option value="+43">(+43) Austria</option>
    <option value="+32">(+32) Belgium</option>
    <option value="+55">(+55) Brazil</option>
    <option value="+1">(+1) Canada</option>
    <option value="+33">(+33) France</option>
    <option value="+49">(+49) Germany</option>
    <option value="+353">(+353) Ireland</option>
    <option value="+39">(+39) Italy</option>
    <option value="+31">(+31) Netherlands </option>
    <option value="+64">(+64) New Zealand</option>
    <option value="+48">(+48) Poland</option>
    <option value="+351">(+351) Portugal</option>
    <option value="+27">(+27) South Africa</option>
    <option value="+34">(+34) Spain</option>
    <option value="+41">(+41) Switzerland</option>
    <option selected="selected" value="+44">(+44) United Kingdom</option>
    <option value="+1">(+1) United States</option>
    </select>

＆＃13;

Answer 3

这是一个javascript解决方案。

$(function(){
  $('#countryCodeForMobile option').each(function(){
    var $this = $(this),
    split = $this.text().split(' '),
    countryCode = split.shift(),
    country = split.slice(0,split.length).join(' '),
    text = countryCode.padEnd( 7, ' ').replace(/ /g, '&nbsp;') + country;
    $this.html( text );
  });
})

它依赖于等宽字体类型;比如courier-new。

Codepen：https://codepen.io/jamespoel/pen/WOJBeR

Answer 4

我建议将数字放在其自己的标签中并将其设置为所需的宽度。请参阅this solution。

Answer 5

不。选项以平台本机的方式设置样式，而样式只是其中一部分的样式不起作用。（通常也不是特别好的主意。）

样式化HTML下拉列表

5 个答案: