Javascript 使输入宽度相同

我的页面上有三个输入。两个文本框和一个提交按钮。我已经用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>

你有du noch keinen账户吗？梅尔德迪安。
#覆盖层{
身高：100%；
宽度：100%；
z指数：100；
背景：白色；
位置：固定；
排名：0；
左：0；
显示：无；
颜色：黑色；
}
#覆盖层关闭{
颜色：80万；
字体大小：200%；
位置：固定；
显示：内联块；
右：0px；
顶部：0px；
填充：10px；
光标：指针；
}
#覆盖形式{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
不透明度：1；
}
#覆盖表单输入{
字体系列：“雷威”；
填充：10px；
大纲：无；
字体大小：200%；
边框：1px纯灰；
显示：块；
保证金：5px；
宽度：100%；
}
#覆盖按钮{
背景色：#167AC6；
颜色：白色；
光标：指针；
宽度：100%；
}
#报名{
位置：固定；
文本对齐：右对齐；
底部：0px；
右：0px；
}
#签约{
颜色：80万；
}

---

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

如果设置边框框大小，您的布局将正常工作：

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

---

（设置边框框大小的方法旨在使第三方插入代码在需要设置替代方案时感到满意。）

如果您设置边框框大小，您的布局将起作用：

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

---

（这种设置边框框大小的方法旨在使第三方插入代码在需要设置替代方案时感到满意。）

不同的输入类型具有不同的框模型

因此，添加

box size:border-box

属性普遍解决了这个问题

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#覆盖层{
身高：100%；
宽度：100%；
z指数：100；
排名：0；
左：0；
颜色：黑色；
}
#覆盖形式{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
不透明度：1；
}
#覆盖表单输入{
字体系列：“雷威”；
填充：10px；
大纲：无；
字体大小：200%；
边框：1px纯灰；
显示：块；
保证金：5px；
宽度：100%；
}

你有du noch keinen账户吗？梅尔德迪安。

不同的输入类型有不同的盒子型号

因此，添加

box size:border-box

属性普遍解决了这个问题

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#覆盖层{
身高：100%；
宽度：100%；
z指数：100；
排名：0；
左：0；
颜色：黑色；
}
#覆盖形式{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
不透明度：1；
}
#覆盖表单输入{
字体系列：“雷威”；
填充：10px；
大纲：无；
字体大小：200%；
边框：1px纯灰；
显示：块；
保证金：5px；
宽度：100%；
}

你有du noch keinen账户吗？梅尔德迪安。

通过添加显示：块

#overlay_button{
    background-color: #167AC6 ;
    color: white;
    cursor: pointer;
    width: 100%;
    display:block; /* Add This */
}

我还建议您添加框大小，以使所有元素在100%宽度上形成良好的格式：在全局css表中添加：

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

---

通过添加display:block

#overlay_button{
    background-color: #167AC6 ;
    color: white;
    cursor: pointer;
    width: 100%;
    display:block; /* Add This */
}

我还建议您添加框大小，以使所有元素在100%宽度上形成良好的格式：在全局css表中添加：

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