입력 내 패딩은 너비 100 %를 끊습니다.

자, 우리는 객체에 패딩을 설정하면 너비가 명시 적으로 설정되어 있어도 너비가 변경된다는 것을 알고 있습니다. 이것에 대한 논리를 논할 수는 있지만, 일부 요소에 문제가 발생합니다.

대부분의 경우 하위 요소를 추가하고 100 %로 설정된 요소 대신 해당 요소에 패딩을 추가하지만 양식 입력의 경우 가능한 단계가 아닙니다.

이것을보십시오 : http://sandman.net/test/formcss.html

두 번째 입력의 패딩은 5px로 설정되어있어 기본 설정보다 훨씬 선호합니다. 그러나 불행히도 100 % 너비에 10px를 추가하는 것을 포함하여 모든 방향으로 입력이 10px 커집니다.

여기서 문제는 입력 내에 자식 요소를 추가 할 수 없어서 수정할 수 없다는 것입니다. 따라서 질문은 다음과 같습니다.

너비를 100 %로 유지하면서 입력 내부에 패딩을 추가하는 방법이 있습니까? 양식이 다른 너비의 부모로 렌더링되므로 부모의 너비를 미리 알 수 없으므로 100 % 여야합니다.

CSS3를 사용하면 box-sizing 속성을 사용 하여 브라우저가 입력 너비를 계산하는 방법을 변경할 수 있습니다 .

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

자세한 내용은 여기를 참조하십시오 : http://css-tricks.com/box-sizing/

크로스 브라우저와의 호환성이 무엇인지 모르겠지만 (firefox 및 safari에서 작동)이 솔루션을 시도 할 수 있습니다.

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(변경 한 값만 게시)

하나의 옵션은 패딩이 있는를 감싸는 것 INPUT입니다 DIV.

CSS :

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML :

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

잊혀진 사람들 calc은 여기서 구출 할 수 있습니다.

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

패딩이 요소의 너비에 추가 될 것이라는 것을 알고 있으므로 전체 너비에서 패딩을 빼기 만하면됩니다. 모든 주요 브라우저에서 지원되며 반응이 좋으며 지저분한 래퍼 div가 필요하지 않습니다.

이와 비슷한 문제가 발생했습니다. 100 %의 입력과 작은 패딩을 가진 tds가 있습니다. 내가 한 것은 다음과 같이 td의 패딩을 보상하는 것입니다.

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

입력 / 텍스트 영역의 테두리와 패딩을 포함하도록 8px의 패딩. 도움이 되었기를 바랍니다!

아마도 border + background를에서 빼고 input대신 divborder + background 및 width : 100 %로 묶고 input?에 여백을 설정하십시오 .

내가 찾은 한 가지 해결책은 입력을 상대적으로 배치 된 부모 태그로 절대적으로 배치하는 것입니다.

<p class="full-width-input">
    <input type="text" class="text />
</p>

스타일을 적용하십시오 :

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

유일하게 알아야 할 것은 단락 태그의 높이 설정이 필요하다는 것입니다. 단, 위치가 지정된 어린이는 높이를 확장하지 않기 때문입니다. 이렇게하면 width: 100%부모 요소의 왼쪽과 오른쪽에 고정 하여 설정할 필요가 없습니다 .

패딩에 백분율을 사용해보십시오.

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

박스 섀도우를 볼 수없는 오래된 브라우저 사용자에 대해 걱정이된다면 입력에 미묘한 배경색을 백업으로 지정하십시오. 이런 종류의 물건에 픽셀을 사용하는 경우 다른 곳에서 픽셀을 사용할 가능성이 있으며 몇 가지 추가 문제가 발생할 수 있습니다.

이것을 막기 위해 내가 아는 것은 100 % -10과 같은 값을 할당하는 것입니다. 그러나 호환성 문제가 있습니다.