Как поместить пробел перед текстом опции в элементе выбора HTML?

Question

В выпадающем списке мне нужно добавить пробелы перед опциями в списке. Я пытаюсь

<select>
<option>&#32;&#32;Sample</option>
</select>

для добавления двух пробелов, но без пробелов. Как я могу добавить пробелы перед текстом опции?

Answer 1

Не является ли &#160 сущность для пространства?

<select>
<option>&#160;option 1</option>
<option>    option 2</option>
</select>

У меня работает ...

EDIT:

Только что проверил это, может иметь проблемы с совместимостью с этим в старых браузерах, но мне кажется, здесь все работает нормально. Просто подумал, что я должен сообщить вам, как вы можете заменить на  

Answer 2

Я думаю, что вы хотите   или  

Так что исправленная версия вашего примера может быть ...

<select>
  <option>&nbsp;&nbsp;Sample</option>
</select>

или

<select>
  <option>&#160;&#160;Sample</option>
</select>

Answer 3

Используйте \ xA0 со строкой. Это прекрасно работает при привязке данных модели C # к выпадающему списку ...

  SectionsList.ForEach(p => { p.Text = "\xA0\xA0Section: " + p.Text; });

Answer 4

Как отметил Роб Купер, существуют некоторые проблемы совместимости со старыми браузерами (IE6 будет отображать настоящие буквы "& nbsp;"

Вот как я обхожу это в ASP.Net (у меня нет открытой VS, поэтому я не уверен, на какие символы это фактически переводится):

Server.HtmlDecode(" ") 

Answer 5

Я пробовал несколько вещей, но единственное, что мне помогло, - это использовать javascript. просто обратите внимание, что я использую код Unicode для пространства, а не сущность html, так как js знает кое-что о сущностях

$("#project_product_parent_id option").each(function(i,option){
  $option = $(option);
  $option.text($option.text().replace(/─/g,'\u00A0\u00A0\u00A0'))
});

Answer 6

Вы также можете нажать Alt + пробел (на Mac) для неразрывного пробела. Я использую его для модуля Drupal, потому что Drupal декодирует html-сущности.

Answer 7

@ Brian

Я почти уверен, что вы можете сделать это и с помощью CSS-отступов. Тогда вы не будете женаты на космических символах, жестко закодированных во всех ваших тегах.

Хорошее мышление - но, к сожалению, оно не работает (любимый браузер каждого ...) IE7: - (

Вот некоторый код, который будет работать в Firefox (и я предполагаю, что Op / Saf).

<select>
    <option style="padding-left: 0px;">Blah</option>
        <option style="padding-left: 5px;">Blah</option>
            <option style="padding-left: 10px;">Blah</option>
    <option style="padding-left: 0px;">Blah</option>
        <option style="padding-left: 5px;">Blah</option>
</select>

Answer 8

Я почти уверен, что вы можете сделать это и с помощью CSS-отступов. Тогда вы не будете женаты на космических символах, жестко закодированных во всех ваших <option> тегах.

Answer 9

Просто используйте символ 255 (введите Alt + 2 + 5 + 5 на цифровой клавиатуре) с моноширинным шрифтом, например Courier New.

Answer 10

Server.HtmlDecode(" ") единственный, кто работал на меня.

В противном случае chr печатается как текст.

Я попытался добавить заполнение в качестве атрибута для элемента списка, однако это не повлияло на него.