CSS格式水平級別的登錄框/按鈕

觀點：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

來源

2014-12-13 mtcrts70

能夠通過使用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;

來源

2014-12-13 19:39:26 mtcrts70

希望這會起作用。

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

來源

2014-12-13 19:44:14

CSS格式水平級別的登錄框/按鈕

回答

相關問題