[css] 너비가있는 CSS 입력 : 100 %가 부모의 경계를 벗어납니다.

Program / 글쓴이

로그인 양식을 삽입 패딩이있는 두 개의 입력 필드로 구성하려고하지만이 두 필드는 항상 부모의 경계를 초과합니다. 이 문제는 추가 된 삽입 패딩 에서 비롯됩니다 . 이 문제를 해결하기 위해 무엇을 할 수 있습니까?

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>

스 니펫 확장

답변

box-sizing:border-box패딩이 요소의 너비 나 높이에 영향을주지 않도록 CSS 정의 를 사용하십시오 . 참조하십시오 box-sizing.

border-box : width 및 height 속성에는 패딩 및 테두리가 포함되지만 여백은 포함되지 않습니다. 패딩 및 테두리는 상자 안에 있습니다.

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

(IE8 +) 의 브라우저 호환성에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%. 아래 예 :

코드 스 니펫 표시

답변

위의 모든 사항이 실패하면 입력에 다음 속성을 설정하여 최대 공간을 사용하지만 오버플로하지 않도록하십시오.

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

답변

다른 답변은 너비를 하드 코딩하거나 브라우저 특정 해킹을 사용한다고 말합니다. 더 간단한 방법이 있다고 생각합니다.

너비를 계산하고 패딩을 빼서 (필드가 겹치게 함). 20px는 왼쪽 패딩의 경우 10px, 오른쪽 패딩의 경우 10px입니다.

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

답변

변화 시도 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

답변

패딩이 전체 너비에 추가됩니다. 컨테이너에는 픽셀 너비가 있으므로 입력에도 픽셀 너비를 제공하는 것이 좋지만 동일한 문제를 피하기 위해 설정 한 너비에서 패딩 및 테두리를 제거해야합니다.

답변

나는이 솔루션을 시도했지만 결정적인 결과를 얻지 못했습니다. 결국 필자는 필드 세트와 함께 적절한 의미 마크 업을 사용했습니다. 너비 계산과 상자 크기를 추가해야했습니다.

또한 필요에 따라 양식 너비를 설정할 수 있으며 입력은 가장자리에 필요한 패딩 내에 유지됩니다.

이 예에서는 범례와 필드 세트에 테두리와 폼 세트를, 범례와 필드 세트에 불투명 한 배경을 두어 서로 겹치는 위치를 확인할 수 있습니다.

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

답변

패딩은 본질적으로 말 때문에 때, 폭에 추가 width:100%하고 padding: 5px 10px당신은 실제로 100 % 폭으로 20 픽셀 추가하고 있습니다.