如何讓此登錄表單更小？

-2

我在我的網站上有一個登錄表單，目前正在處理中。問題是，整個事情只是大。它被放置在我的頁面的右上角，頭部在中間，菜單欄在左上角。與標題和菜單欄相比，它佔用了很多空間。我已經弄了一段時間的CSS和HTML代碼，但是我無法弄清楚如何製作更小的密碼和用戶名的「字段」或框。有什麼建議麼？如何讓此登錄表單更小？

form { 
 
    \t float:right; 
 
    \t font-family: Arial, Helvetica, sans-serif; 
 
    } 
 
    
 
    .login { 
 
    \t position: absolute; 
 
    \t top: 10px; 
 
    \t right: 25px; 
 
    \t font-size: 50%; 
 
    \t display: inline-block; 
 
    }

<form> 
 
    <span class='login'> 
 
    
 
    <label for="E-mail">E-mail</label> 
 
    <input name="Email" placeholder="E-mail" id="E-mail" /> 
 
    
 
    <label for="Password">Password</label> 
 
    <input type="password" placeholder="Password" id="Password" /> 
 
    
 
    <input type="submit" value="Log in" /> 
 
    </span> 
 
    </form>

來源

2017-02-10 In6ify

我們不知道您的「標題」或「菜單欄」是什麼樣子。我們怎麼可能回答這個問題？ – Turnip

只需使用CSS值... – Justinas

提示：'input {max-width：100px; }' – thepio

嘗試使用類似於：

input { 
    width: 50%; 
}

您也可以只針對文本類型的輸入字段：

input[type=text] { 
    ... 
}

來源

2017-02-10 13:38:55 Plenarto

首先改變<span class='login'>到<div class='login'> ，它是否定的這個用途的跨度很大。並添加此樣式：

form{ 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    } 

    .login{ 
    width: 50%; /* or any thing you need*/ 
    font-size: 50%; 
    } 

    .login input[type=password]{font-size: 10px; /* or any thing you need*/}

來源

2017-02-10 16:42:27

如何讓此登錄表單更小？

回答

相關問題