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>

当前回答

我把这个放在这里，以防它可能会帮助到一些人，即使它不是问题代码中的情况，但我认为它可能与问题主题本身有关。

我只是在一个场合绊倒了，我正在使用CSS网格样式的表单，输入是溢出的。

解决方案是增加:

grid-template-columns: 100%

因为默认的自动值会导致溢出。

2023-01-27 20:27:12

其他回答

试着编码一下

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

2021-05-09 09:46:01

是否希望输入字段居中? 将元素居中的技巧:指定元素的宽度并将边缘设置为auto，例如:

margin : 0px auto;
width:300px

一个链接到您更新的小提琴:

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

2013-06-03 23:43:09

你也有一个错误在你的css与感叹号在这一行:

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

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

2013-06-03 23:48:14

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

2013-06-03 23:42:28

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

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

2015-12-08 20:19:50

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

推荐文章

最新文章

标签