带宽度的CSSinput：100％超出父母的界限

我试图做一个login表单，由两个input字段组成，内部填充，但是这两个字段总是最终超出了父母的界限; 该问题源自添加的内嵌填充。 可以做些什么来纠正这个问题呢？

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

注意：代码可能不是最干净的。 例如，封装文本input的span元素可能根本就不需要。

HTML：

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

CSS：

 #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); } .login-top { height: 85px; } .login-bottom { padding: 35px 15px 0 0; } 

Answer 1

使用CSS定义box-sizing:border-box来防止填充影响元素的宽度或高度。 请参阅文件box-sizing 。 您可能还需要检查浏览器兼容性 （IE8 +）。

边框 ：宽度和高度属性包括填充和边框，但不包括边框…请注意，填充和边框将在框内。

 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> 

Answer 2

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

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

Answer 3

填充添加到整个宽度。 因为你的容器有一个像素宽度，所以最好给input一个像素宽度，但记得从你设置的宽度中去掉填充和边框，以避免同样的问题。

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

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

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

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

Answer 6

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

Answer 7

你想input字段居中？ 中心元素的技巧：指定元素的宽度并将边距设置为自动，例如：

 margin : 0px auto; width:300px 

链接到更新的小提琴：

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

Answer 8

你也有一个错误在你的CSS与感叹号在这一行：

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

在它之前删除分号。 但是，重要的应该很less使用，并且可以在很大程度上避免。

Answer 9

我试过这些解决scheme，但从来没有得出确凿的结果。 最后，我使用了一个fieldset的适当的语义标记。 它节省了不得不添加任何宽度计算和任何箱子大小。

它还允许您根据需要设置窗体宽度，并将input保留在边缘所需的填充内。

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

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