如何在选择选项的开头保留空格？答案

【问题标题】：How to keep whitespaces in the begining of select options?如何在选择选项的开头保留空格？
【发布时间】：2018-03-28 13:07:09
【问题描述】：

我需要在选择选项的开头保留空格，所以我要添加样式：style="white-space: pre，呈现的形式如下：

  <select id="doc_category" name="doc[category]" class="form-control select2 form-control">
        <option value="32" style="white-space: pre">G1</option>
        <option value="33" style="white-space: pre"> p1</option>
        <option value="34" style="white-space: pre"> p333</option>
        <option value="35" style="white-space: pre">G2</option>
        <option value="36" style="white-space: pre"> p3</option>
        <option value="37" style="white-space: pre">GłãWNA3</option>
        <option value="38" style="white-space: pre"> pod5</option>
    </select>

空格消失了。

【问题讨论】：

重复的问题。 stackoverflow.com/questions/11293536/…
如果你想要视觉分组，你可以使用<optgroup> btw。
Preserve whitespace in html select element options using "white-space: pre" NOT working的可能重复

标签： html css

【解决方案1】：

添加 &nbsp; 而不是 <pre> 对我有用：

<select id="doc_category" name="doc[category]" class="form-control select2 form-control">
  <option value="32">G1</option>
  <option value="33">&nbsp;p1</option>
  <option value="34">&nbsp;p333</option>
  <option value="35">G2</option>
  <option value="36">&nbsp;p3</option>
  <option value="37">GłãWNA3</option>
  <option value="38">&nbsp;pod5</option>
</select>

预览

【讨论】：

【解决方案2】：

将&nbsp; 放在开头或（更好，因为那时没有真正的空白）使用padding-left:1em;

【讨论】：

【解决方案3】：

您应该为此使用选项组。

来自W3Schools的一个很好的简单示例

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

【讨论】：

谢谢，但也希望主类别可以选择。