使输入宽度相同

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

如果您施加边框框大小调整，您的布局将会起作用：

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

（设置边框大小调整的方法旨在让第三方插入代码感到高兴，以防它想要设置替代方案。）

Answer 2

不同的输入类型有不同的盒子模型。

因此，添加box-sizing:border-box属性可以解决此问题。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#overlay {
  height: 100%;
  width: 100%;
  z-index: 100;
  top: 0;
  left: 0;
  color: black;
}
#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%;
}

<div id="overlay">
  <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>

Answer 3

通过添加 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;
}