与宽度CSS输入：100％去外面父母的束缚与宽度CSS输入：100％去外面父母的束缚(CSS Inp

我试图做一个登录表单构成与插入填充两个输入字段，但是这两个领域的最终总是超过其母公司的边界; 这个问题从添加插图填充柄。 还有什么比为了解决这个问题，做什么？

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

注：该代码可能不会在其干净。 举例来说，可能不会在所有需要它封装了文本输入的span元素。

  #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定义box-sizing:border-box ，以防止填充的影响元素的宽度或高度。 请参阅文件box-sizing 。 您可能还需要检查的浏览器兼容性box-sizing （IE8 +）。

边界框 ：width和height属性包括填充和边界，但不是保证金...请注意，填充和边界将在箱子内。

input[type=text],
input[type=password] {
    box-sizing : border-box;
}

编辑：在此编辑的时候，没有前缀所必需的box-sizing 。 见shouldiprefix.com 。

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

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

通过计算的宽度和减去填充（这导致场重叠）。 该20像素来自10px的左填充和10px的右填充。

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

Answer 4:

填充被添加到总宽度。 因为你的容器具有像素宽度，你给过的输入像素宽度也比较好，但要记住，从您设置，以避免同样的问题宽度去除填充和边框。

Answer 5:

尝试改变box-sizing ，以border-box 。 该padding被添加到width您的input元件。

见这里演示

CSS

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

input {
    box-sizing: border-box;
}

+ box-sizing

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你实际上增加20像素到100％的宽度。

Answer 8:

你想居中输入字段？ 特技到中心元件：指定元素的宽度和设定的边距为自动，例如：

margin : 0px auto;
width:300px

链接到你的更新提琴：

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

Answer 9:

您还可以在该行的感叹号你的CSS的错误：

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

之前除去分号。 然而，！重要的应该很少使用，可以在很大程度上避免。

文章来源: CSS Input with width: 100% goes outside parent's bound