CSS_html/css_WEB-ITnose で選択/オプションのテキストを中央揃えまたは右揃えにする方法

categoryJS Learning

現在、select 要素で css: text-align を使用すると、まったく機能しないことがわかります。

select { text-align: right }

option { text-align: right }

すべての Webkit ベースのブラウザーは、select の text-align CSS プロパティを実装していないようです。

ここに一時的な解決策をいくつか示します

1) 単にパディングを使用して整列して見えるようにします

例: これは、パディングが適切である限り、効果は依然として良好で、固定幅の状況に適しています

選択してください。 {

...

padding: 0 0 0 20px;

}

例 http://jsfiddle.net/P5k4D/1/

2) いくつかの UI ライブラリを使用して

jQueryUI の選択メニューなどを実装しますhttp://jqueryui.com/selectmenu/

利点は、さまざまなブラウザーで一貫性のない選択制御インターフェイスの問題を解決できることです。

3) 右揃え: rtl 属性を使用して制御できます。

Foo

bar

右へ

CSSで記述:

select {

direction: rtl;

}

参考:

http:/// stackoverflow.com/questions/19790687/horizo​​ntally-text-center-for-select-option

http://stackoverflow.com/questions/7920677/text-align-right-on-select-or-option