CSS 宽度输入：100% 超出父边界

Question

我正在尝试制作一个带有两个带有插入填充的输入字段的登录表单，但它们最终超出了父母的界限。 这是什么原因造成的？

JSFiddle 片段： http://jsfiddle.net/4x2KP/

 #mainContainer { line-height: 20px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; background-color: rgba(0,50,94,0.2); margin: 20px auto; display: table; -moz-border-radius: 15px; border-style: solid; border-color: rgb(40, 40, 40); border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px; border-radius: 2px; border-radius: 2px 5px / 5px; box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2); }.loginForm { width: 320px; height: 250px; padding: 10px 15px 25px 15px; overflow: hidden; }.login-fields >.login-bottom input#login-button_normal { float: right; padding: 2px 25px; cursor: pointer; margin-left: 10px; }.login-fields >.login-bottom input#login-remember { float: left; margin-right: 3px; }.spacer { padding-bottom: 10px; } /* ELEMENT OF INTEREST HERE, */ input[type=text]: input[type=password] { width; 100%: height; 20px: padding; 5px 10px: background-color, rgb(215, 215; 215): line-height; 20px: font-size; 12px: color, rgb(136, 136; 136): border-radius; 2px 2px 2px 2px: border, 1px solid rgb(114, 114; 114): box-shadow, 0 1px 0 rgba(24, 24, 24.0;1): } input[type=text],hover: input[type=password],hover: label,hover ~ input[type=text]: label:hover ~ input[type=password] { background,rgb(242, 242; 242):important: } input[type=submit],hover { box-shadow, inset 0 1px 0 rgba(255,255.255,0,3), inset 0 -10px 10px rgba(255,255.255;0.1); }

 <div id="mainContainer"> <div id="login" class="loginForm"> <div class="login-top"> </div> <form class="login-fields" onsubmit="alert('test'); return false;"> <div id="login-email" class="login-field"> <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label> <span><input name="email" id="email" type="text"></input></span> </div> <div class="spacer"></div> <div id="login-password" class="login-field"> <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label> <span><input name="password" id="password" type="password"></input></span> </div> <div class="login-bottom"> <input type="checkbox" name="remember" id="login-remember"></input> <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label> <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input> </div> </form> </div> </div>

Answer 1

根据CSS 基本框模型，元素的宽度和高度应用于其内容框。 填充落在该内容框之外并增加元素的整体大小。

因此，如果您将一个带内边距的元素设置为 100% 宽度，则其内边距将使其比其包含元素的 100% 更宽。 在您的上下文中，输入变得比其父级更广泛。

您可以更改盒模型处理填充和宽度的方式。 将box-sizing CSS 属性设置为border-box以防止填充影响元素的宽度或高度：

border-box : width 和 height 属性包括内边距和边框，但不包括边距...请注意，内边距和边框将在框内。

请注意box-sizing (IE8+) 的浏览器兼容性。
在进行此编辑时，不需要前缀。

---

Paul Irish和Chris Coyier推荐以下“继承”用法：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

参考：
* { Box-sizing: Border-box } FTW
继承 box-sizing 可能稍微好一点的最佳实践。

---

这是在您的特定上下文中的演示：

 #mainContainer { line-height: 20px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: rgba(0, 50, 94, 0.2); margin: 20px auto; display: table; -moz-border-radius: 15px; border-style: solid; border-color: rgb(40, 40, 40); border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px; border-radius: 2px; border-radius: 2px 5px / 5px; box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2); } .loginForm { width: 320px; height: 250px; padding: 10px 15px 25px 15px; overflow: hidden; } .login-fields > .login-bottom input#login-button_normal { float: right; padding: 2px 25px; cursor: pointer; margin-left: 10px; } .login-fields > .login-bottom input#login-remember { float: left; margin-right: 3px; } .spacer { padding-bottom: 10px; } input[type=text], input[type=password] { width: 100%; height: 30px; padding: 5px 10px; background-color: rgb(215, 215, 215); line-height: 20px; font-size: 12px; color: rgb(136, 136, 136); border-radius: 2px 2px 2px 2px; border: 1px solid rgb(114, 114, 114); box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1); box-sizing: border-box; } input[type=text]:hover, input[type=password]:hover, label:hover ~ input[type=text], label:hover ~ input[type=password] { background: rgb(242, 242, 242); !important; } input[type=submit]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1); } .login-top { height: auto;/*85px;*/ } .login-bottom { padding: 35px 15px 0 0; }

 <div id="mainContainer"> <div id="login" class="loginForm"> <div class="login-top"> </div> <form class="login-fields" onsubmit="alert('test'); return false;"> <div id="login-email" class="login-field"> <label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label> <span><input name="email" id="email" type="text" /></span> </div> <div class="spacer"></div> <div id="login-password" class="login-field"> <label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label> <span><input name="password" id="password" type="password" /></span> </div> <div class="login-bottom"> <input type="checkbox" name="remember" id="login-remember" /> <label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label> <input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in" /> </div> </form> </div> </div>

---

或者，不是为<input>元素本身添加填充，而是为包裹输入的<span>元素设置样式。 这样， <input>元素可以设置为width:100%而不受任何额外填充的影响。 下面的例子：

 #login-form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: rgba(0, 50, 94, 0.2); margin: 20px auto; padding: 10px 15px 25px 15px; border: 4px solid rgb(40, 40, 40); box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2); border-radius: 2px; width: 320px; } label span { display: block; padding: .3em 1em; background-color: rgb(215, 215, 215); border-radius: .25em; border: 1px solid rgb(114, 114, 114); box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1); margin: 0 0 1em; } label span:hover { background: rgb(242, 242, 242); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1); } input[type=text], input[type=password] { background: none; border: none; width: 100%; height: 2em; line-height: 2em; font-size: 12px; color: rgb(136, 136, 136); outline: none; } .login-bottom { margin: 2em 1em 0 0; } input#login-button { float: right; padding: 2px 25px; } input#login-remember { float: left; margin-right: 3px; }

 <form id="login-form"> <label>E-mail address <span><input name="email" type="text" /></span> </label> <label>Password <span><input name="password" type="password" /></span> </label> <div class="login-bottom"> <label> <input type="checkbox" name="remember" id="login-remember" />Remember my email </label> <input type="submit" name="login-button" id="login-button" value="Log in" /> </div> </form>

Answer 2

如果以上都失败，请尝试为您的输入设置以下属性，使其占用最大空间但不溢出：

input {
    min-width: 100%;
    max-width: 100%;
}

Answer 3

其他答案似乎告诉您对宽度进行硬编码或使用特定于浏览器的 hack。 我认为有一个更简单的方法。

通过计算宽度并减去填充（导致字段重叠）。 20px 来自左侧填充的 10px 和右侧填充的 10px。

input[type=text],
input[type=password] {
    ...
    width: calc(100% - 20px);
}

Answer 4

尝试将box-sizing更改为border-box 。 padding会增加input元素的width 。

在此处查看演示

CSS

input[type=text],
input[type=password] {
    width: 100%;
    margin-top: 5px;
    height: 25px;
    ...
}

input {
    box-sizing: border-box;
}

+ box-sizing

Answer 5

填充被添加到总宽度。 因为你的容器有一个像素宽度，你最好也给输入一个像素宽度，但记住从你设置的宽度中删除填充和边框以避免同样的问题。

Answer 6

我尝试了这些解决方案，但从未得到确凿的结果。 最后，我对字段集使用了正确的语义标记。 它无需添加任何宽度计算和任何框大小。

它还允许您根据需要设置表单宽度，并且输入保持在边缘所需的填充范围内。

在这个例子中，我在表单和字段集上放置了一个边框，在图例和字段集上放置了一个不透明的背景，这样你就可以看到它们是如何重叠和相互放置的。

<html>
  <head>
  <style>
    form {
      width: 300px;
      margin: 0 auto;
      border: 1px solid;
    }
    fieldset {
      border: 0;
      margin: 0;
      padding: 0 20px 10px;
      border: 1px solid blue;
      background: rgba(0,0,0,.2);
    }
    legend {
      background: rgba(0,0,0,.2);
      width: 100%;
      margin: 0 -20px;
      padding: 2px 20px;
      color: $col1;
      border: 0;
    }
    input[type="email"],
    input[type="password"],
    button {
      width: 100%;
      margin: 0 0 10px;
      padding: 0 10px;
    }
    input[type="email"],
    input[type="password"] {
      line-height: 22px;
      font-size: 16px;
    }
    button {
    line-height: 26px;
    font-size: 20px;
    }
  </style>
  </head>
  <body>
  <form>
      <fieldset>
          <legend>Log in</legend>
          <p>You may need some content here, a message?</p>
          <input type="email" id="email" name="email" placeholder="Email" value=""/>
          <input type="password" id="password" name="password" placeholder="password" value=""/>
          <button type="submit">Login</button>
      </fieldset>
  </form>
  </body>
</html>

Answer 7

填充基本上是添加到宽度上的，因此当您说width:100%和padding: 5px 10px ，实际上是在 100% 宽度上添加了 20px。

Answer 8

您的 css 中也有一个错误，在这一行中带有感叹号：

background:rgb(242, 242, 242);!important;

去掉前面的分号。 但是， !important 应该很少使用，并且可以在很大程度上避免使用。

Answer 9

尝试编码这个

*, ::after, ::before {
  box-sizing: border-box;
}

Answer 10

这是棘手的，而且是情境性的。 这些评论有些混乱，我们总结一下解决方案：

1. showdev 在接受的答案中解释了第一种有效的方法。 但是，这不是最终的。

事实上：如果你在输入中添加一些填充，现在它可以工作了。 如果您添加一些边距，它仍然会溢出。 似乎 box-sizing 被忽略了。 摆弄 min-width 和 max-width 也是没用的。

2. 要应用边距，Al Zziwa 解释了唯一可行的解决方案，它使用 calc() 将宽度减小了边距。 例如，向左右添加边距：

    input { margin: 0 20px; width: calc(100% - 40px); }

如果您不喜欢此解决方案，解决方法是避免输入中的边距，而是在应用填充或边距的地方使用包装器。

Answer 11

在你的父 div 中设置.parent { height: fit-content; } .parent { height: fit-content; }

Answer 12

我把它留在这里以防它可能对某人有所帮助，即使它不是问题代码中的情况，但我认为它可能与问题主题本身有关。

我只是偶然发现了一个场合，我正在使用一个带有 CSS 网格样式的表单并且输入溢出。

解决方案是添加：

grid-template-columns: 100%

因为默认的auto值导致溢出。

Answer 13

您希望输入字段居中吗？ 使元素居中的技巧：指定元素的宽度并将边距设置为自动，例如：

margin : 0px auto;
width:300px

指向您更新的小提琴的链接：

http://jsfiddle.net/4x2KP/5/