html - CSS/HTML : input bar width and button width not the same even though I'm setting it as the same

Question

我的任务是制作一个登录页面，输入和按钮的宽度必须为 320 像素，包括 2 像素的边框和 15 像素的内边距。我为输入和按钮创建了两个类，在 CSS 中我为两者指定了这些宽度，但按钮总是变短。现在它是这样出来的:1

我在这方面还很陌生，所以如果我的代码很乱，我深表歉意/这看起来像是一个愚蠢的问题。

这是我的代码: HTML

<form class="signup" action="/signup/" method ="post">
 <fieldset name="sign-up">
   <legend>Sign up</legend>

   <div class="input">
   <label for="email">Email</label></br>
   <input class="inputbar" placeholder="foo@bar.com" type="email" name="email" id="email" required/></br>

   <label for="password">Password</label></br>
   <input class="inputbar" placeholder="1234passw0rd" type="password" name="password" id"password" required/></br>
   </div>
</fieldset>

<button type="signupbutton">Sign up</button>
</form>

CSS

.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto; 
text-align: center;
background-color: white;
}

.signup fieldset{
border: none;
}

.input{
text-align: left;
}

.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}

button{
background-color: mediumseagreen;
color: white;
}

谢谢大家!

Answer 1

容器宽度最好设置为100%，然后里面的元素。使用 box-sizing: border-box; 是这里的关键。

* {
  box-sizing: border-box;
}

.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto; 
text-align: center;
background-color: white;
}

.signup fieldset{
border: none;
padding: 0;
margin: 0;
}

.input{
text-align: left;
}

.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 100%;
}

button{
background-color: mediumseagreen;
color: white;
}