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

Question

我需要在选择选项的开头保留空格，所以我要添加样式：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>

并且空白消失了。

Answer 1

添加 代替<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>

预览

Answer 2

您应该使用选项组。

来自W3Schools

的一个很好的简单示例

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将 放在开头OR（由于当时没有真正的空白区域，因此更好）使用 padding-left:1em;