webentwicklung-frage-antwort-db.com.de

Wie werden mehrere Ebenen von select optgroup mit CSS eingerückt?

Ich habe gerade versucht, optgroup-Blöcke durch Verschachtelungstiefe einzurücken, ich habe eine allgemeine margin-left-Regel ausprobiert, verschachtelte Elemente versuchten dann, dieselbe Regel anzuwenden, padding-left.... Es scheint elementar: P

Im folgenden Beispiel sollte die mit 'client2_a' bezeichnete optgroup mehr eingerückt werden als die anderen, da sie in 'client2' verschachtelt ist.

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

14
danjah

29.08.2016 Bearbeiten

Die ursprüngliche Antwort unten ist in modernen Browsern nicht mehr funktionsfähig. Für diejenigen, die immer noch ein Tag verwenden müssen, anstatt mit HTML-Listen zu zaubern, wurde in diesem stackoverflow-Thread eine bessere Lösung gefunden: Rendern einer Hierarchie von "OPTION" s in einem "SELECT" -Tag

Ich würde die Lösung empfehlen, die von igor-krupitsky vorgeschlagen wird. und stattdessen die binäre. Zumindest in Chrome bedeutet dies nicht, dass die Tastatur verwendet wird, um das erste Zeichen eines Elements in der Liste zu finden.

Ende bearbeiten

Die aktuelle HTML-Spezifikation enthält keine verschachtelten Tags, die Funktionen hinzufügen (z. B. Einrückungen). Siehe diesen Link .

In der Zwischenzeit können Sie Ihre Ebenen manuell mit CSS gestalten. Ich habe versucht, Stile in Ihrem Beispiel zu verwenden, aber aus irgendeinem Grund wurden sie nicht korrekt gerendert. Daher wird Folgendes funktionieren:

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

Hoffentlich hilft das.

21
eliel

Es ist erstaunlich einfach als das Styling. Die Antwort kam zu mir nach stundenlangem Kampf :)). Die Tags für optgroup und option definieren Zeichenfolgen im Nur-Lese-Modus, also tatsächlich. Damit Sie den Inhalt der optgroup oder der Optionen einrücken können, verwenden Sie einfach ein einfaches Leerzeichen in den Namen oder &nbsp.

So einfach ist das :)!

16
lucian

Als Nachtrag zu Lucians Antwort scheinen neuere Versionen von Chrome nicht zu unterstützen, dass &nbsp; in den Text eingebettet ist. Es wird tatsächlich das Et-Zeichen usw. angezeigt, anstatt Ihnen den geschützten Raum zu geben. Ich fand jedoch, dass die Verwendung der Unicode-Version des geschützten Bereichs immer noch in Ordnung ist.

Ich benutze Scala und konnte "\u00A0" in meinem serverseitigen Code verwenden. Sie könnten das Unicode-Zeichen wahrscheinlich direkt in Ihren Code einfügen, aber ich würde es nicht empfehlen (nur weil es so schwer zu sagen ist, dass es kein normales Leerzeichen ist).

Eine schöne Sache ist, dass Chrome zumindest die Leerzeichen in Bezug auf die Tastaturnavigation ignoriert. Wenn ich eine Option mit dem Namen Test habe, wird die Hervorhebung trotzdem durch Eingabe von t nach rechts verschoben, unabhängig davon, wie viele geschützte Leerzeichen vorangestellt werden.

5
ShawnFumo

Fügen Sie dem CSS dies hinzu:

option {
text-indent: 10px; 
}

Erledigt.

0
FollaPijas