CSS：如何摆脱输入框间距问题？

Question

我在一个带有登录屏幕的网站上工作，但我遇到了登录按钮比用户名和密码输入框小 10 像素的问题。

我已经将所有样式设置为 90% 的大小，但是因为我在输入框上添加了 10px 的左填充，所以占位符文本与边框之间有一个间距。如果我只将填充添加到占位符，那么我会遇到问题，只要我在框中输入内容，填充就会消失。 那么如何将占位符向右移动 10px 以及我输入的文本？

问题输入框更大：

无间距问题：

login ul {
  margin: 50px;
  padding: 0;
  list-style-type: none;
}

.login {
  vertical-align: middle;
}

login li input {
  border-style: solid;
  border-width: 5px;
  border-color: black;
}

login li input[type="text"] {
  padding-left: 10px;
  color: #1ED760;
  font-weight: 900;
  font-size: 120%;
}

.username-box {
  margin: 5px;
  padding: 0px;
  border: 0;
  width: 90%;
  height: 40px;
}

.username-box::placeholder {
  color: #1ED760;
  font-weight: 900;
  font-family: Arial;
}

.password-box {
  margin: 5px;
  padding: 0;
  border: 0;
  width: 90%;
  height: 40px;
}

.password-box::placeholder {
  color: #1ED760;
  font-weight: 900;
  font-family: Arial;
}

.login-btn {
  margin: 5px;
  padding: 0;
  border: 0;
  height: 40px;
  width: 90%;
  padding: 0px 0px;
  text-align: center;
  color: black;
  font-weight: 900;
  font-family: Arial;
  font-size: 120%;
}

<login class="login">
  <ul>
    <li><input class="username-box" type="text" placeholder="Username"></li>
    <li><input class="password-box" type="text" placeholder="Password"></li>
    <li><button width="" class="login-btn" type="submit"><div class="login-btn.text">Login</div></button></li>
  </ul>
</login>

Answer 1

将 box-sizing: border-box 添加到您的输入中。这样，您添加的 padding 不会增加输入宽度，因为宽度和高度属性将包括内容、填充和边框。

要了解有关 box-sizing 属性的更多信息，请参阅 box-sizing - CSS: Cascading Style Sheets | MDN

Obs：我为您的输入添加了一些背景颜色，以使其宽度可见。

login ul {
  margin: 50px;
  padding: 0;
  list-style-type: none;
}

.login {
  vertical-align: middle;
}

login li input {
  border-style: solid;
  border-width: 5px;
  border-color: black;
}

login li input[type="text"] {
  padding-left: 10px;
  color: #1ED760;
  font-weight: 900;
  font-size: 120%;
  box-sizing: border-box;
  background-color: #eee;
}

.username-box {
  margin: 5px;
  padding: 0px;
  border: 0;
  width: 90%;
  height: 40px;
}

.username-box::placeholder {
  color: #1ED760;
  font-weight: 900;
  font-family: Arial;
}

.password-box {
  margin: 5px;
  padding: 0;
  border: 0;
  width: 90%;
  height: 40px;
}

.password-box::placeholder {
  color: #1ED760;
  font-weight: 900;
  font-family: Arial;
}

.login-btn {
  margin: 5px;
  padding: 0;
  border: 0;
  height: 40px;
  width: 90%;
  padding: 0px 0px;
  text-align: center;
  color: black;
  font-weight: 900;
  font-family: Arial;
  font-size: 120%;
}

<login class="login">
  <ul>
    <li><input class="username-box" type="text" placeholder="Username"></li>
    <li><input class="password-box" type="text" placeholder="Password"></li>
    <li><button width="" class="login-btn" type="submit"><div class="login-btn.text">Login</div></button></li>
  </ul>
</login>

Answer 2

* {
  box-sizing: border-box;
}

希望添加此 CSS 代码可以解决您的问题。阅读更多关于 box-sizing 属性 here