javascript - 使输入宽度相同

Question

我的页面上有三个输入。两个文本框和一个提交按钮。我已经用 css 设计了它们的样式，但我就是无法让按钮的宽度与文本框的宽度相同。 它看起来像这样:

这是我的代码:

     <div id="overlay">
        <div id="overlay_close" onclick="toggleView()"><i class="fa-close fa"></i></div>

<form action="login.php" method="POST">
        <input type="text" name="user" placeholder="Nutzername">
        <input type="password" name="pass" placeholder="Password">
        <input type="button" name="submit" value="Einloggen!" id="overlay_button">
</form>

<div id="signup">Hast du noch keinen Account? Melde dich <a href="#">hier</a> an.</div>
    </div>


<style type="text/css">

#overlay{
    height: 100%;
    width: 100%;
    z-index: 100;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    color: black;
}

#overlay_close{
    color: #800000;
    font-size: 200%;
    position: fixed;
    display: inline-block;
    right: 0px;
    top: 0px;
    padding: 10px;
    cursor: pointer;
}

#overlay form{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;

}

#overlay form input{

    font-family: "Raleway";
    padding: 10px;
    outline: none;
    font-size: 200%;
    border: 1px solid grey;
    display: block;
    margin: 5px;
    width: 100%;

}

#overlay_button{
    background-color: #167AC6 ;
    color: white;
    cursor: pointer;
    width: 100%;

}

#signup{
    position: fixed;
    text-align: right;
    bottom: 0px;
    right: 0px;
}

#signup a{
    color: #800000;
}



</style>

如何让按钮的宽度与文本框的宽度相同？

Answer 1

如果您强加 border-box 框大小，您的布局将起作用:

body { box-sizing: border-box; }
body *, body *:before, body *:after { box-sizing: inherit; }

(这种设置边框大小的方法旨在让第 3 方插入代码满意，以防它想要设置替代方案。)