CSS如何解决输入框与登录按钮宽度不一致及占位符间距问题

你遇到的宽度不一致问题是默认CSS盒模型导致的：默认content-box模式下，元素的width仅指内容区宽度，添加的padding、border会额外撑开总宽度。你给输入框加了10px左内边距后，输入框总宽度变成90% + 10px，自然比没有padding的按钮宽10px。

具体修改步骤 #

• 统一盒模型为border-box，这种模式下padding和border都会被计算在你设置的width范围内，不会额外撑开元素宽度
• 直接给输入框统一设置padding-left: 10px，不需要单独给占位符加样式，输入的文本和占位符都会自动继承这个内边距产生左偏移
• 清理代码中冲突的重复样式，修正小错误

修改后的完整代码 #

CSS代码 #

/* 统一盒模型，也可以单独给输入框、按钮添加该属性 */
* {
  box-sizing: border-box;
}
login ul {
  margin: 50px;
  padding: 0;
  list-style-type: none;
}
.login {
  vertical-align: middle;
}
.username-box {
  margin: 5px;
  padding: 0 0 0 10px; /* 左内边距实现文本、占位符统一右偏移10px */
  border: 0;
  width: 90%;
  height: 40px;
  color: #1ED760;
  font-weight: 900;
  font-size: 120%;
}
.username-box::placeholder {
  color: #1ED760;
  font-weight: 900;
  font-family: Arial;
}
.password-box {
  margin: 5px;
  padding: 0 0 0 10px; /* 同输入框左内边距 */
  border: 0;
  width: 90%;
  height: 40px;
  color: #1ED760;
  font-weight: 900;
  font-size: 120%;
}
.password-box::placeholder {
  color: #1ED760;
  font-weight: 900;
  font-family: Arial;
}
.login-btn {
  margin: 5px;
  padding: 0;
  border: 0;
  height: 40px;
  width: 90%;
  text-align: center;
  color: black;
  font-weight: 900;
  font-family: Arial;
  font-size: 120%;
}

HTML代码（修正密码框类型、冗余标签错误） #

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

效果说明 #

修改后输入框和按钮的总宽度都是父元素宽度的90%，完全对齐；输入框内的占位符和用户输入的文本都会自带10px的左间距，不会出现输入内容后间距消失的问题。

内容的提问来源于stack exchange，提问作者lucifer