Question

虽然我完全按下了提交按钮和输入文字：

width:60%

但是当我运行应用程序时，它们的宽度不同：

＆＃13;

.loginClass {
  width: 40%;
  height: 40%;
  margin: auto auto;
}

.loginClass ul li {
  list-style: none;
}

.loginClass ul li input {
  width: 60%;
}

＆＃13;

<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>

＆＃13;

你能解释一下并帮忙吗？

Answer 1

这是因为默认情况下两个边框属性都不同。

在按钮上使用box-sizing: content-box，或在输入元素上使用box-sizing: border-box。

Answer 2

我刚刚添加了

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

问题解决了

JSfiddle Demo

CSS提交按钮和输入文本不具有相同的宽度

2 个答案: