html - Haml- header 中的设计，同一行中的字段

我正在与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

最佳答案

.group.wat-cf转换为作为块元素的<div class="group wat-cf"></div>。

在CSS中，应将其display属性更改为inline或inline-block，以使它们水平堆叠。

就像是：

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

关于html - Haml- header 中的设计，同一行中的字段，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8047202/