Как отступить несколько уровней select optgroup с помощью CSS?
просто пытаюсь отступить блоки optgroup по глубине вложенности действительно, я пробовал общий margin-left правило, вложенные элементы затем пытаются применить то же правило, попробовали padding-left... это отступы, как это возможно? Кажется элементарным: P
в приведенном ниже примере optgroup с надписью "client2_a" должен быть отступом больше, чем другие, потому что он вложен внутри "client2".
4 ответов
8/29/2016 редактировать
оригинальный ответ ниже не работает в современных браузерах. Для тех, кому все еще нужно использовать тег вместо того, чтобы делать магию со списками HTML, лучшее решение было найдено в этом потоке stackoverflow:отображение иерархии "OPTION" s в теге "SELECT"
Я бы рекомендовал решение, предложенное Игорь-Крупицкого кто предлагает удалить и использовать двоичный файл вместо этого. По крайней мере Хром, это не ломать с помощью клавиатуры, чтобы найти первый символ элемента в списке.
Редактирование
текущая спецификация 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>надеюсь, что это поможет.
Это удивительно просто, чем стиль. Ответ пришел ко мне после нескольких часов борьбы :)) . Теги optgroup и option определяют строки в режиме только для чтения. Поэтому для отступа любого содержимого optgroup или option вы просто используете простое пространство в именах или  .
это так просто :)!
в качестве дополнения к ответу Люциана новые версии Chrome, похоже, не поддерживают наличие встроенные в текст. Он фактически покажет амперсанд и т. д. Вместо того, чтобы давать вам неразрывное пространство. Однако, я обнаружил, что с помощью версия unicode неразрывного пространства по-прежнему будет работать нормально.
Я использую Scala, поэтому смог просто иметь "\u00A0" в моем коде на стороне сервера. Возможно, вы могли бы вставить символ unicode непосредственно в свой код, но я не рекомендовал бы (просто потому, что было бы так трудно сказать, что это не нормальное пространство).
одна хорошая вещь заключается в том, что Chrome, по крайней мере, будет игнорировать пробелы с точки зрения навигации по клавиатуре. Если у меня есть опция с именем Test, введя t еще сможете перейти прямо к нему, независимо от того, сколько неразрывные пробелы перед текстом.