CSS / HTML：即使我将输入栏的宽度和按钮的宽度设置为相同，也不相同

Question

我的任务是制作一个登录页面，输入和按钮必须具有320px的宽度，包括2px的边框和15px的填充。我为输入和按钮创建了两个类，在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;
}

Answer 2

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

似乎您已将按钮的宽度设置为250px。尝试将其更改为320px。

Answer 3

删除输入类上的文本

.input{ 
 text-align: left;
}

然后执行

.signup .input label {
    text-align: left;
    display: inline-block;
    width: 100%;
    padding-left: 20px;
}

除了铬之外一切都可以正常工作

您使用哪种浏览器运行测试？

这是我在浏览器上的内容