2011-01-04 16 views
5

私は3つのテキストボックスが(電話番号のように)隣接していたり​​、テキストボックスの隣にドロップダウンリストが必要なようなスラッグを押すと、フォームスタイリングにCSSを使用しませんでした。私はちょうどよいオルラーのテーブルなしでそれを様式にする信頼できる方法を考え出すことができませんでした。テーブルの代わりにCSSフォーム2011

フォームスタイリングのためにCSSに戻ることを考えています。私は知らない:

  1. フィールドの上または左にキャプションを付けることが可能かどうか。
  2. どのようにスタイルを設定して、隣接する2つのフォーム要素でもうまく配置されるようにします。

参考資料ですか?これはまだパイプの夢ですか?

+1

フロートやボックスモデルの仕組みがわからないと言っていますか? – rxgx

答えて

2

フォームをレイアウトするために特別に設計されたカップルのテンプレートがいくつかあります。

私は、これは生産的で素晴らしい方向にあなたを指すのに役立ちます願っています。世話をする。

0

いいえ、それは非常に可能であり、私(および多くの他の人)は何年もそれをやっています。

float: (left|right)display: (inline|inline-block)をご覧ください。

+0

フィールドの上または左にラベルを使用していますか?テキストボックスを隣に置く必要があるとき(市外局番、接頭辞、電話番号の接尾辞など)はどうしますか?あなたは例がありますか? – Caveatrob

+0

@Caveatrobそれを行う他のサイトのCSSとHTMLを確認してください。浮き沈みを見てください。 – alex

+0

@Caveatrob 3つのテキストボックスがあり、それらのテキストボックスを隣り合わせにしたい場合は、各フロートが左に置かれます(パディングがある可能性があります)。次に、両方をクリアします。後に。いくつかのHTMLを提供できる場合は、CSSでマークアップすることができます。 –

3

このような意味ですか?

alt text

基本的に我々はpseudotable

.mxrow { 
clear: both; 
width: 100%; 
height: 50px; 
} 


.mxcell { 
float: left; 
padding-top: 10px; 
padding-bottom: 10px; 
height: 26px; 
} 

.mxcell_firstcell{ 
width: 25%; 
} 

を作成し、マークアップが

<div class = "mxrow"> 
    <div class = "mxcell mxcell_firstcell"><input element /></div> 
    <div class = "mxcell mxcell_secondcell"><another form element/></div> 
</div> 

になり、個々の細胞のクラス名は(私のマークアップがグリッドである)特定のCSSを適用するのに役立つ

+0

うん。フォームのための私の最初のセットの浮動/分割CSSを作ったとき、私はそれをしている時間のb * tchを持っていました。私がオンラインで見つけたすべての例は、1行に1つのラベル/単一フォームコントロールを持っています。 – Caveatrob

+0

これは、多くのJavaScriptアニメーションがテーブルでうまく動作しないためです。あなたのためにいくつかのCSSを取ってみましょう –

+0

ここでも優雅な劣化はありません。 –

0

他の人があなたにいくつかの有効な提案をしますイオン...まだ問題がある場合は、FormeeのようなフォームCSSのフレームワークを試すことができます。http://www.formee.org/

関連する問題