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

我试图使一个登录表单与两个输入字段的插入填充，但他们最终超出了父的界限。是什么导致的?

jsfiddle.net/4x2kb/

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

当前回答

我尝试了这些解决方案，但从来没有得到一个决定性的结果。最后，我使用了带有字段集的适当语义标记。它节省了必须添加任何宽度计算和任何盒子大小。

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

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

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

2016-07-06 12:00:28

其他回答

试着编码一下

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

2021-05-09 09:46:01

这很棘手，而且是根据情况而定的。这些评论中有一些困惑，让我们总结一下解决方案:

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

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

要应用边距，Al Zziwa解释了唯一可行的解决方案，即使用calc()来减少边距的宽度。例如，添加左、右边距: 输入{ 边距:0 20px; 宽度:calc(100% - 40px); ｝

如果您不喜欢这个解决方案，那么解决方法是避免在输入中使用空白，而是使用应用填充或空白的包装器。

2022-03-24 11:36:04

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

2013-06-03 23:44:15

如果以上都失败了，试着为你的输入设置以下属性，让它占用最大的空间，但不会溢出:

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

2015-12-08 20:19:50

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

通过计算宽度并减去填充(这会导致字段重叠)。20px来自于左填充10px和右填充10px。

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

2015-04-10 15:07:26

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

推荐文章

最新文章

标签