尽管我制作了提交按钮和输入文本:
width:60%
但是当我运行应用程序时,它们的宽度不同:
.loginClass {
width: 40%;
height: 40%;
margin: auto auto;
}
.loginClass ul li {
list-style: none;
}
.loginClass ul li input {
width: 60%;
}
<form class="loginClass">
<ul>
<li>
<input placeholder="Username" name="username" type="text" value="">
</li>
<li>
<input placeholder="Username" name="username" type="text" value="">
</li>
<li>
<input type="submit" value="Login">
</li>
</ul>
</form>
你能解释一下并帮忙吗?
最佳答案
那是因为两个 border-box 属性在默认情况下是不同的..
在按钮上使用 box-sizing: content-box
,或在输入元素上使用 box-sizing: border-box
。
关于html - CSS 提交按钮和输入文本的宽度不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24389298/