Как отступать несколько уровней отбираемой группы opt с группой CSS?

Просто пытаясь отложить блоки optgroup с помощью глубины вложенности, я пробовал общее правило margin-left, вложенные элементы, пытающиеся применить одно и то же правило, попытались padding-left... отступы как это возможно? Кажется элементарным: P

В приведенном ниже примере optgroup с надписью "client2_a" должна быть отступом больше других, потому что она вложена внутри "client2".

http://jsfiddle.net/Tb5Rc/5/

ОТВЕТЫ

Ответ 1

8/29/2016 Редактировать

Исходный ответ ниже не работает в современных браузерах. Для тех, кому еще нужно использовать тег вместо того, чтобы делать магии с помощью списков HTML, в этом потоке stackoverflow было найдено лучшее решение: Предоставление иерархии "OPTION" в "" ВЫБОР" тег

Я бы рекомендовал решение, предложенное igor-krupitsky, которое предлагает dropping & nbsp; и используя двоичный & # 160; вместо. По крайней мере, в Chrome это не сломается, используя клавиатуру, чтобы найти первый символ элемента в списке.

Редактировать конец

Текущая спецификация HTML не предусматривает вложенных тегов, добавляющих любую функциональность (например, отступы). См. эту ссылку.

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

<select name="select_projects" id="select_projects">
        <option value="">project.xml</option>
        <optgroup label="client1">
            <option value="">project2.xml</option>
        </optgroup>
        <optgroup label="client2">
            <option value="">project5.xml</option>
            <option value="">project6.xml</option>
            <optgroup label="client2_a">
                <option value="" style="margin-left:23px;">project7.xml</option>
                <option value="" style="margin-left:23px;">project8.xml</option>
            </optgroup>
            <option value="">project3.xml</option>
            <option value="">project4.xml</option>
       </optgroup>
       <option value="">project0.xml</option>
       <option value="">project1.xml</option>
    </select>

Ответ 2

Это удивительно просто, чем стиль. Ответ пришел ко мне через несколько часов борьбы:)). Теги optgroup и option определяют строки в режиме только для чтения, актуально. Поэтому для того, чтобы вы отступали от какого-либо содержимого optgroup или option, вы просто используете простое пространство в именах или &nbsp.

Это так просто:)!

Ответ 3

В качестве дополнения к lucian ответу, более новые версии Chrome, похоже, не поддерживают &nbsp;, встроенные в текст. Он фактически покажет амперсанд и т.д. Вместо того, чтобы дать вам незаменимое пространство. Тем не менее, я обнаружил, что использование unicode version неиспользуемого пространства будет работать нормально.

Я использую Scala, поэтому имел возможность иметь "\u00A0" в моем серверном коде. Вероятно, вы можете вставить символ Юникода непосредственно в свой код, но я бы не рекомендовал его (просто потому, что было бы так сложно сказать, что это не нормальное пространство).

Хорошо, что Chrome, по крайней мере, будет игнорировать пробелы в плане навигации по клавиатуре. Если у меня есть опция с именем Test, набрав t, она по-прежнему будет перемещать выделение вправо, независимо от того, сколько нераспаковываемых пробелов добавляет ее.

Ответ 4

Добавьте к css это:

option {
text-indent: 10px; 
}

Готово.