web-dev-qa-db-ja.com

CSSで複数のレベルの選択したoptgroupをインデントする方法は?

ネストグループの深さによってoptgroupブロックをインデントしようとするだけで、一般的なmargin-leftルール、ネストされた要素、次に同じルールを適用しようとしました、padding-left...このようなインデントは可能ですか?小学校らしいね:P

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

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

14
danjah

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

とても簡単です:)!

16
lucian

Lucianの回答の補足として、Chromeの新しいバージョンでは、テキストに を埋め込むことはサポートされていないようです。実際にはアンパサンドなどが表示されますが、 -breaking space。ただし、改行しないスペースの nicode version を使用しても問題なく動作することがわかりました。

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

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

5
ShawnFumo

これをCSSに追加:

option {
text-indent: 10px; 
}

できました。

0
FollaPijas