Haml - Devise in Header、同じ行にあるフィールド

Question

私はHamlと一緒に作業していますが、電子メール、パスワード、送信ボタンを同じ行に表示する方法が分かりません私のホームページの代わりに、彼らは通常のフォームのようにお互いの上に積み重ねられています。

!!! 
%html 
    %head 
    %title 
    = stylesheet_link_tag "web-app-theme/base", "web-app-theme/themes/activo/style", "web-app-theme/override" 
    = csrf_meta_tag 
    %body 
    #container 
     #header 
     %h1 
      %a{:href => "/"} Peer Instruction Network 
     #user-navigation 
      %ul.wat-cf 
      %li 
       .content.login 
       .flash 
        - flash.each do |type, message| 
        %div{ :class => "message #{type}" } 
         %p= message 
       = form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :class => "form login" }) do |f| 
        .group.wat-cf 
        .left= f.label :email, :class => "label right" 
        .right= f.text_field :email, :class => "text_field" 
        .group.wat-cf 
        .left= f.label :password, :class => "label right" 
        .right= f.password_field :password, :class => "text_field" 
        .group.wat-cf 
        .right 
         %button.button{ :type => "submit" } 
         Login 
       /= link_to "Sign In", destroy_user_session_path 
     #box 
     = yield 

Answer 1

がブロック要素である<div class="group wat-cf"></div>に変換されます：以下のコードです。

CSSには、横向きにスタックするために、displayプロパティをinlineまたはinline-blockに変更する必要があります。以下のような

何か：

.group.wat-cf { 
    display: inline; /* or display: inline-block; */ 
} 

Answer 2

あなたはこのためにHAMLまたは生のHTMLを使用するかどうかに違いはありません。問題は、.somethingを使用すると、ブロック要素である<div class="something">が作成されることです。

つまり、displayプロパティをinlineに変更するか、floatを使用する必要があります。

.left, .right { float: left; } 
.group { clear: both; } 

あなたは何をやっている知っている限り、それは、そこにいくつかのトラブルの原因となるので、あなたは、IEとの後方互換性を必要とする場合、私はdisplay: inline-block;を使用することから落胆と思います。