以按百分比表示的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按钮宽度？响应式按钮问题

回答

相关问题