时间戳

首页 > 解决方案 > CSS/HTML：即使我将其设置为相同，输入栏宽度和按钮宽度也不相同

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

问题描述

我的任务是创建一个登录页面，输入和按钮的宽度必须为 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;
}

感谢大家！

标签： htmlcss

解决方案

最好将容器宽度设置为 100%，然后将里面的元素设置为 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;
}

推荐阅读