以按百分比表示的Css按鈕寬度？響應式按鈕問題

這裏我的問題是，每當我使我的註冊和登錄形式的按鈕元素將不會停留在我設置的寬度（75％）。這要麼太大，要麼太小，這取決於我如何調整大小。您可以看到，如果您運行的代碼與表單容器或文本輸入相比是不平衡的。以按百分比表示的Css按鈕寬度？響應式按鈕問題

的Html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>Notes</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <link rel="stylesheet" type="text/css" href="css/home.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="js/animation.js"></script> 
    <script src="js/verification.js"></script> 
    </head> 
    <body> 
    <div id="header"> 
     <div id="header-wrapper"> 
     <h1 id="banner">Notes</h1> 
     <button id="register-btn">Register</button> 
     <button id="login-btn">Login</button> 
     </div> 
    </div> 
    <div id="register-form-container"> 
     <form action="" method="post"> 
     <input type="username" class="username" placeholder="Username"><br> 
     <input type="password" class="password" placeholder="Password"><br> 
     <input type="submit" class="submit-btn" value="Sign Up"> 
     </form> 
    </div> 
    <div id="login-form-container"> 
     <form action="php/login.php" method="post"> 
     <input type="username" class="username" placeholder="Username"><br> 
     <input type="password" class="password" placeholder="Password"><br> 
     <input type="submit" class="submit-btn" value="Login"> 
     </form> 
    </div> 
    </body> 
</html>

的CSS

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700); 

* { 
    font-family: "PT Sans", sans-serif; 
} 

html, body { 
    margin: 0%; 
    width: 100%; 
    height: 100%; 
} 

#header { 
    height: 100px; 
    width: 100%; 
    background-color: #1ABC9C; 
} 

#header-wrapper { 
    width: 50%; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#banner { 
    margin: 0%; 
    padding: 0%; 
    text-align: center; 
    font-size: 45px; 
    font-weight: lighter; 
} 

#register-btn { 
    float: left; 
} 

#login-btn { 
    float: right; 
} 

#register-btn, #login-btn { 
    font-size: 25px; 
    margin: 0%; 
    padding: 0%; 
    background: none; 
    border: none; 
} 

#register-btn:hover, #login-btn:hover { 
    color: #004C3D; 
} 

#register-form-container, #login-form-container { 
    display: none; 
    width: 50%; 
    height: 250px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 15px; 
    background-color: #ECF0F1; 
    border-radius: 20px; 
} 

.username { 
    margin-top: 50px; 
} 

.username, .password { 
    width: 75%; 
    height: 50px; 
    margin-left: 12.5%; 
    margin-right: 12.5%; 
} 

.submit-btn { 
    width: 75%; 
    height: 50px; 
    margin-left: 12.5%; 
    margin-right: 12.5%; 
    margin-bottom: 50px; 
    background-color: #1ABC9C; 
    border: none; 
} 

.username:focus, .password:focus { 
    box-shadow: 0 0 10px #9ECAED; 
}

jQuery的（很肯定這是過時的問題）

var isOpen = false; 

$(document).ready(function() { 
    $("#register-btn").click(function() { 
    if(isOpen) { 
     isOpen = false; 
     $("#register-form-container").css("display", "none"); 
    } else { 
     isOpen = true; 
     $("#register-form-container").css("display", "block"); 
    } 
    }); 

    $("#login-btn").click(function() { 
    if(isOpen) { 
     isOpen = false; 
     $("#login-form-container").css("display", "none"); 
    } else { 
     isOpen = true; 
     $("#login-form-container").css("display", "block"); 
    } 
    }); 
});

的jsfiddle：https://jsfiddle.net/s0t1m4ae/

來源

2016-02-04 Neonz27

你Ĵ ust需要申請：

.username, .password, .submit-btn { 
    padding: 0px 0px; /* You could put here something custom, like 0px 5px; if you want */ 
    box-sizing: border-box; 
}

要解決這一切。

來源

2016-02-05 00:06:34 Paradoxetion

啊非常感謝！我從來沒有使用盒子大小，所以我從來沒有想過它會與我有關，我只是愚蠢的填充，但我真的很感激它的人！ – Neonz27

不要對不起=）這就是爲什麼我們都在這裏。很好，它幫助你！ – Paradoxetion

以按百分比表示的Css按鈕寬度？響應式按鈕問題

回答

相關問題