jQuery UI - アイコンのアラインメント

次の例では、重複しないようにテキスト、入力ボックス、アイコンを整列させようとしています。jQuery UI - アイコンのアラインメント

http://jsfiddle.net/zGZM7/2/

私が欠けているいくつかのCSSはありますか？

おかげ

編集、悲しいことに私はと呼ば取得されていないFFとIE6 :(あなたのフィドルとのみ該当ビットに無関係なCSSの多くを持って

出典

2011-06-20 Raoul

次の行に折り返さずに、同じ行のすべての要素を意味しますか？ – andyb

@andybはい、申し訳ありませんが、私が探しているものです。 Niklasは、機能するソリューションを提供しています。ありがとう – Raoul

問題はない、私はちょうど明確にしたい:-) – andyb

で動作するソリューションが必要ですそれはあなたの例では、ID #iconsでul下にある必要があり、以下でul#iconsを削除する：。

.ui-icon {float: left; margin: 0 4px;}

は、あなたが説明するようにそれを動作させるべき

。

例：
http://jsfiddle.net/niklasvh/kTFw7/

出典

2011-06-20 09:17:22 Niklas

完璧な、まさに私が探していた、余分なCSSを残念。あなたのソリューションは完璧に動作します。 – Raoul

害虫であることを申し訳ありません。私はFFでテストしましたが、これは素晴らしいですが、IE6では、それはまだ新しい行です。これには道がありますか？ありがとう。 – Raoul

@Raoulこの種のCSSを使ってIE6ユーザに条件文を表示することができます：http://jsfiddle.net/kTFw7/25/（インラインtd幅にも注意してください） – Niklas

が異なるTDSで

<table> 
    <tr> 
     <td>Foo</td> 
     <td><input type=text id=Foo class=textInput></td> 
     <td><a href="#" class="ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-s"></a></td> 
    </tr> 
</table>

または

それらを分割スタイルフロートを追加：入力

<td> 
    <input type=text id=Foo class=textInput style="float:left"> 
    <a href="#" class="ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-s"></a> 
</td>

またはニクラスのアイデア

のように左

.ui-icon {float: right; margin: 0 2px;}

出典

2011-06-20 09:21:52 jargalan

jQuery UI - アイコンのアラインメント

答えて

関連する問題