14

実際にネストの深さによってoptgroupブロックをインデントしようとしているだけで、一般的なmargin-leftルールを試しました。要素をネストしてから、同じルールを適用しようとしましたpadding-left...このようなインデントは可能ですか? 初歩的なようです：P

以下の例では、「client2_a」というラベルの付いた optgroup は、「client2」内にネストされているため、他のグループよりも多くインデントする必要があります。

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

4

4 に答える 4

22

2016/8/29 編集

以下の元の回答は、最新のブラウザーでは機能しなくなりました。HTML リストでマジックを行う代わりにタグを使用する必要がある人のために、このスタックオーバーフロー スレッドでより良い解決策が見つかりました: "SELECT" タグで "OPTION" の階層をレンダリングする

  を削除することを提案しているigor-krupitskyによって提案された解決策をお勧めします。バイナリを使用して   代わりは。少なくとも 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>

それが役立つことを願っています。

于 2011-04-22T01:39:50.830 に答える
16

スタイリングよりも驚くほど簡単です。答えは、何時間もの苦労の末に私に届きました:)）。optgroup および option タグは、実際には読み取り専用モードで文字列を定義しています。そのため、optgroup またはオプションの内容をインデントするには、名前または に単純なスペースを使用するだけです&nbsp。

それはとても簡単です:) !

于 2012-02-27T18:34:47.270 に答える
5

&nbsp;ルシアンの回答への補遺として、新しいバージョンの Chrome はテキストへの埋め込みをサポートしていないようです。非改行スペースを提供する代わりに、実際にはアンパサンドなどを表示します。ただし、改行なしスペースのUnicode バージョンを使用しても問題なく動作することがわかりました。

私はScalaを使用しているので"\u00A0"、サーバー側のコードに含めることができました. Unicode 文字をコードに直接貼り付けることもできますが、お勧めしません (通常のスペースではないと判断するのが非常に難しいため)。

良い点の 1 つは、キーボード ナビゲーションに関して少なくとも Chrome がスペースを無視することです。という名前のオプションがある場合、改行しないスペースがいくつ前に付いていてもTest、入力するとハイライトが右に移動します。t

于 2014-05-20T15:06:35.347 に答える