CSS输入元素宽度超出容器

Posted 2023-03-06

【中文标题】CSS输入元素宽度超出容器

【英文标题】：CSS input element width going outside container

【发布时间】：2016-07-08 08:26:12

【问题描述】：

为什么电子邮件和密码宽度超出input-container 宽度？

  form 
    background: #ccc;
  
  .input-container 
    background: red;
    width: 469px;
    margin: 0 auto;
  
  .usermail,
  .userpword 
    margin-top: 10px;
  
  input,
  button 
    width: 100%;
    border-radius: 6px;
    border: 1px solid #cacece;
    padding: 10px 12px;
    font-size: 1em;
  
  .username input 
    width: 206px;
  

<form action='' method='post' id='signupform'>
  <div class='input-container'>
    <div class='username'>
      <input type='text' name='fname' id='fname' placeholder='First Name'>
      <input type='text' name='lname' id='lname' placeholder='Last Name'>
    </div>
    <div class='usermail'>
      <input type='email' name='email' id='email' placeholder='Email'>
    </div>
    <div class='userpword'>
      <input type='password' name='pword' id='pword' placeholder='Password'>
    </div>
    <button>Sign Up</button>
  </div>
</form>

【问题讨论】：

因为您的填充不计入宽度，所以您的输入是100% + padding 宽。使用box-sizing: border-box 来解决这个问题。此外，这同样适用于您的边框。

CSS Input with width: 100% goes outside parent's bound的可能重复

^ 谷歌“CSS 盒子模型”

记住，一个简单的规则。 total width = width + padding + border

忘记了填充效果。谢谢。

【参考方案1】：

那是因为您设置了填充。它将元素宽度的值与填充集相加。

为避免此行为，建议添加属性box-sizing: border-box

例子：

#element
    box-sizing: border-box;

甚至更好：

*
    box-sizing: border-box;

【讨论】：

具体添加到input, button CSS规则中

尽管“更好”是一个非常宽松的定义，因为许多人会认为使用* 通配符对于整体性能不好。就我个人而言，我不会使用 *，因为它会将整个盒子模型颠倒过来，并且您认为您现在知道的所有东西的工作方式都不同，但这是个人喜好。