반응 형 입력

화면 너비를 기준으로 반응적인보기를 위해 웹 페이지를 특정 제한으로 설정했습니다. 하지만, 양식 입력이 width:100% 및 padding-left:20px 너비로 설정된 문제가 있습니다. 결과는 패딩으로 인해 웹 페이지의 본문 너비를 초과하는 입력 필드 폭 비율이 20 픽셀로 표시됩니다.반응 형 입력

enter image description here

입력 코드 :

내가 입력 필드의 끝에 여분의 공간이 적절한 폭으로 억제하는 것을 얻을 수있는 방법

.field { 
    outline:0; 
    width:100%; 
    height:50px; 
    padding-left:10px; 
    float:left; 
    border: 1px solid #d3d4d5; 
    border-right-color: #c2c7ca; 
    border-left-color:#c2c7ca; 
    color:#3a444f; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 5px; 
    position: relative; 
    z-index: 0; 
    -webkit-background-clip: padding-box; 
    font-size:16px; 
}

출처

2014-07-13 Anonymous

왜 패딩을 제거하지 않습니까? ... 함께 HTML을 게시 할 수 있습니까? – BuddhistBeast

border-box를 시도하십시오 : 입력에 대해 상자 크기를 조정하십시오. – Tushar

패딩이 없으면 이미지의 하단 입력 필드가 2 개 있습니다. 물론, 여기 라이브 미리보기 http://jsfiddle.net/Pxlc/k6SuD/1/ –

추가 공간을 추가 할 필요가 없습니다. 당신은 간단하게 사용할 수 있습니다

input { 
    box-sizing: border-box; 
    width: 100%; 
}

을 폭 설정은 패딩과 국경을 포함 border-box 옵션.

출처

2014-07-13 05:11:12

굉장, 고마워! –

반응 형 입력

답변

관련 문제