2009-08-09 13 views
7

を並べるここでかなり標準Railsのフォームからの抜粋です行いますテキスト入力フィールドとそのラベルが正しく

<p> 
    <%= f.label :from_station %> <%= f.text_field :from_station %> 
    </p> 
    <p> 
    <%= f.label :to_station %> <%= f.text_field :to_station %> 
    </p> 

デフォルトでは、これは次のようにレンダリング:

alt text http://img412.imageshack.us/img412/127/picture6u.png

これは」doesnのテキストフィールドが並んでいないので、見栄えが良い。どのようなフォームを作成する最も簡単な方法は、より次のようになります:

alt text http://img193.imageshack.us/img193/746/picture7shk.png

私は<label>の上widthスタイルプロパティを設定しようとしましたが、このプロパティには、何もしていないようです。

+0

私は、各フィールドを独自の行に配置しないこと、つまり、fromとtoを互いに横に並べることがないことを発見しました。 – ProfK

答えて

14

である<table>を使用することができます。

ラベルはデフォルトでブロックレベルの要素ではないため、幅を受け付けません。このCSSを設定してみてください:

label{ 
    width: 4em; 
    float: left; 
    text-align: right; 
    margin-right: 0.5em; 
    display: block 
} 

+0

このソリューションは、古いブラウザ(IE6など)で動作するかどうか疑問です。私はテーブルソリューションがより信頼できると思います... –

+1

はい、それはスクリーンリーダーやテキストのみのブラウザでも効果的です。そして検索エンジン:) –

+0

フロートがトリックをします! – markus

1

あなたは、私は、これはCSSの質問のよりだと思う各ラベルが列1であり、各テキストフィールドに列2

関連する問題