CSS格式水平级别的登录框/按钮

问题描述：

<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>    
    <div class="loginText makeInline2"> 
    <%= f.text_field :email, :placeholder => "email", :size => 20 %></br> 
    <% if devise_mapping.rememberable? -%> 
     <%= f.check_box :remember_me %> <%= f.label :remember_me %> 
    <% end %> 
    </div> 

    <div class="loginText makeInline2"> 
    <%= f.password_field :password, :placeholder => "password", :size => 20 %></br> 
    Forgot your password? 
    </div> 

    <div class="makeInline2"> 
    <%= f.submit "Log in" %> 
    </div> 
<% end %>

CSS：

.loginText { 
color: #DCDCDC; 
} 

.loginText label { 
font-weight:normal; 
} 

.makeInline2 { 
display:inline-block; 
padding: 20px; 
}

产地：

css and view produces the following

希望做一些事情与以上图片通过CSS：

首先，您可以看到密码框略低于电子邮件框，而登录按钮低于两个输入框。任何想法如何使他们完全水平垂直（如facebook登录看起来像例子）？换句话说把密码文本框和登录按钮两者的顶部，以在下面的图像中的水平线：

enter image description here

最后，关于如何关闭的水平间隙任何想法（由“X”中所表示下面的图片）的电子邮件文本，密码文本框和登录按钮之间：

enter image description here

能够通过使用padding-left：0px来关闭间隙'x'现在就寻找问题的第一部分。 – mtcrts70 2014-12-13 19:14:34

vertical-align：text-top;为问题的其他部分工作 – mtcrts70 2014-12-13 19:38:25

答

试试这个：

padding-left: 0px; 
vertical-align: text-top;

答

希望这会起作用。

.makeInline2{ 
    float:left; 
    padding-left:0px;   
    }

CSS格式水平级别的登录框/按钮

相关推荐