CSS输入宽度：100％超出父级的界限 [英] CSS Input with width: 100% goes outside parent's bound

问题描述

我试图创建一个由两个输入字段组成的登录表单，其中有一个插入填充，但是这两个字段总是超过其父节点的边界;该问题源自添加的插入填充。为了纠正此问题，可以做些什么？

JSFiddle代码段： http：// jsfiddle.net/4x2KP/

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

HTML：

 < div id =mainContainer> 
< div id =loginclass =loginForm> 
< div class =login-top> 
< / div> 
< form class =login-fieldsonsubmit =alert（'test'）; return false;> 
< div id =login-emailclass =login-field> 
< label for =emailstyle = -  moz-user-select：none; -webkit-user-select：none; onselectstart =return false;>电子邮件地址< / label> 
< span>< input name =emailid =emailtype =text>< / input& 
< / div> 
< div class =spacer>< / div> 
< div id =login-passwordclass =login-field> 
< label for =passwordstyle = -  moz-user-select：none; -webkit-user-select：none; onselectstart =return false;>密码< / label> 
< span>< input name =passwordid =passwordtype =password>< / input& 
< / div> 
< div class =login-bottom> 
< input type =checkboxname =rememberid =login-remember>< / input> 
< label for =login-rememberstyle = -  moz-user-select：none; -webkit-user-select：none; onselectstart =return false;>记住我的电子邮件< / label> 
< input type =submitname =login-buttonid =login-button_normalstyle =cursor：pointervalue =登录>< / input& 
< / div> 
< / form> 
< / div> 
< / div> 
  

CSS：

 code> #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：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） 
} 
 
 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; 
} 
  

解决方案

使用CSS定义 box-sizing：border-box ，以防止填充影响元素的宽度或高度。请参阅 框大小 。您可能还需要检查框大小 （IE8 +版本）的浏览器兼容性 ）。

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

 code> 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：85px;}。login-bottom {padding：35px 15px 0 0;}  

 < div id =mainContainer> < div id =loginclass =loginForm> < div class =login-top> < / div> < form class =login-fieldsonsubmit =alert（'test'）; return false;> < div id =login-emailclass =login-field> < label for =emailstyle = -  moz-user-select：none; -webkit-user-select：none; onselectstart =return false;>电子邮件地址< / label> < span>< input name =emailid =emailtype =text/>< / span> < / div> < div class =spacer>< / div> < div id =login-passwordclass =login-field> < label for =passwordstyle = -  moz-user-select：none; -webkit-user-select：none; onselectstart =return false;>密码< / label> < span>< input name =passwordid =passwordtype =password/>< / span> < / div> < div class =login-bottom> < input type =checkboxname =rememberid =login-remember/> < label for =login-rememberstyle = -  moz-user-select：none; -webkit-user-select：none; onselectstart =return false;>记住我的电子邮件< / label> < input type =submitname =login-buttonid =login-button_normalstyle =cursor：pointervalue =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]背景：无; border：none;宽度：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>电子邮件地址< span>< input name =emailtype =text/>< / span> < / label> < label>密码< span>< input name =passwordtype =password/>< / span> < / label> < div class =login-bottom> < label> < input type =checkboxname =rememberid =login-remember/>记住我的电子邮件< / label> < input type =submitname =login-buttonid =login-buttonvalue =登录/> < / div>< / form>  

I am trying to make a login form constituted of two input fields with an inset padding, but those two fields always end up exceeding its parent's boundaries; the issue stems from the added inset padding. What could be done in order to rectify this issue?

JSFiddle snippet: http://jsfiddle.net/4x2KP/

N.B.: The code may not be at its cleanest. For instance, the span element that encapsulates the text inputs may not be needed at all.

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

解决方案

Use the CSS definition box-sizing:border-box to prevent padding from affecting an element's width or height. See documentation for box-sizing. You may also want to check the browser compatibility of box-sizing (IE8+).

border-box : The width and height properties include the padding and border, but not the margin... Note that padding and border will be inside of the box.

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

EDIT: At the time of this edit, no prefixes are necessary for box-sizing. See 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: 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>

---

Alternatively, rather than adding padding to the <input> elements themselves, style the <span> elements wrapping the inputs. That way, the <input> elements can be set to width:100% without being affected by any additional padding. Example below:

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

这篇关于CSS输入宽度：100％超出父级的界限的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！