Haml - Разработка в заголовке, поля в одной строке - PullRequest
Новая
       33

Haml - Разработка в заголовке, поля в одной строке

1 голос
/ 08 ноября 2011

Я работаю с 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

Ответы [ 2 ]

1 голос
/ 08 ноября 2011

Нет разницы, используете ли вы для этого HAML или необработанный HTML.Проблема в том, что когда вы используете .something, он создаст <div class="something">, который является элементом блока.

Это означает, что вы должны либо изменить свойство display на inline, либоиспользуйте float. 

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

Я бы не рекомендовал использовать display: inline-block;, если вам нужна обратная совместимость с IE, поскольку это вызывает некоторые проблемы, если вы не знаете, что делаете.

1 голос
/ 08 ноября 2011

.group.wat-cf переводится в <div class="group wat-cf"></div>, который является элементом блока.

В вашем CSS вы должны изменить его свойство display на inline или inline-block, чтобы они складывалисьпо горизонтали.

Что-то вроде: 

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