2012-04-18 4 views
1

フォームのドロップダウンリストに列を整列させるソリューションを知っている人は誰ですか? CSSでおそらくフォームのドロップダウンリストに列を作成できますか?

クロスブラウザ便利だろう... 例えば

<select size="1"> 
<option> John Smith  | 24 | United States</option> 
<option> Johnny Vegas | 34 | United Kingdom</option> 
<option> Andrew Townsend | 34 | Canada</option> 
</select> 

縦棒

は...列のちょうど表現が整列している感覚

+0

のスタイルを確認してください。このようなことを実装するカスタムライブラリがいくつかあります。 – mellamokb

+1

私はあなたのためにフィドルを追加しました。 – gdoron

+0

divやその他のHTML要素で作成した独自のカスタマイズドロップダウンを使用する必要があります。それをJavaScriptでイベントを定義して見栄えを良くするようにしてください – Tarun

答えて

0

gdoronを考えるようになりましたテストクロスブラウザをオフに作業!

あなたはおそらく、カスタムコンボボックスコントロールの代わりに、内蔵されたあなたはクリーンマルチカラムの機能が必要な場合は、ブラウザを使用して方がいいでしょう

select style="font-family: monospace;" 
2

これはCSSで行うことができない、あなただけの、それをインデントする空白を追加することができます

・ホープあなたが質問でしたように。

<select size="1"> 
    <option> John Smith &thinsp; &thinsp; &thinsp; &thinsp;&thinsp;&thinsp;&thinsp;&thinsp; | 24 | United States</option> 
    <option> Johnny Vegas&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp; &thinsp;| 34 | United Kingdom</option> 
    <option> Andrew Townsend | 34 | Canada</option> 
</select>​​​​​​​​​​​​​ 

LIVE DEMO

+0

おそらく固定幅のフォントも必要でしょう。 – mellamokb

+0

あなたは良い点を作っています。しかし、データはデータベースから動的なので、長さはわかりません。私はPHPでできると思いますか? – Webby

+0

@Webby。それはクライアント側またはサーバ側で行うことができ、それぞれの方法はo.kです。 – gdoron

0

これにアプローチする最良の方法は、ライブラリの形でページの読み込みに追加の要求を追加することを警戒している場合、可視UL-LIを作成するためにCSSを使用することですカスタムドロップダウンを行い、各liにクリックイベントをアタッチして隠しセレクトを操作します。 CSSとjQuery/javascriptを使用するのはかなり簡単です(私はjQueryのほうが簡単です。なぜなら、入力が少なく、慣れているからです)。私はので、私はこの

はかなり確信して..私はPHPでこれを行うにはtheresのは、他の方法と確信して後で

$name = str_replace("_", "&nbsp;", str_pad($name , 50 ,"_")); 

を、このスレッドを見つけ、それらのための迅速なPHPのハックを考え書いた

関連する問題