입력 요소에 여분의 공간이 필요합니다.

두 개의 열이있는 컨테이너가 들어있는 간단한 HTML 태그가 있습니다. 각 열은 유형이 text 인 <input> 요소와 <a> 요소가 있습니다.입력 요소에 여분의 공간이 필요합니다.

<div class="container align-center"> 
    <div class="col col-440"> 
     <input type="text" name="pickup-info" placeholder="Afhaaladres"> 
    </div> 
    <div class="col col-60"> 
     <a class='submit-link' href="#">Go</a> 
    </div> 
    <div style="clear:both;"></div> 
</div>

CSS의 :이 코드

.container { 
    margin: auto; 
    width: auto; 
    max-width: 960px; 
    text-align: center; 
} 
@media (max-width: 1024px) { 
    .container { 
     margin-left: 30px; 
     margin-right: 30px; 
    } 
} 

.col { 
    display: inline-block; 
    float: left; 
} 
@media (max-width: 768px) { 
    .col { 
     display: block; 
     float: none; 
     width: 100% !important; 
    } 
} 

/* 440 + 60 = 500 */ 
.col-440 { width: 440px; } 
.col-60 { width: 60px; } 

.align-center { text-align: center !important; }

는 자신의 열이 내부의 요소는 다음과 같습니다 : 당신이 볼 수 있듯이

가 입력 text와 입력 요소는이 5px있다 오른쪽에 여분의 공간이있어서 <a> 요소가 <input> 요소와 겹치게됩니다. 어떻게 제거 할 수 있습니까?

출처

2016-11-05 erol_smsr

에

box-sizing:border-box

를 추가하여이 문제를 해결할 수 있습니까? 내 펜은 현재 다음과 같이 보입니다 : https://codepen.io/Aer0/pen/WobbBW – Aer0

예제 코드에는 CSS가 누락되어 있지만 100 % 너비 위에 패딩을 추가 한 것처럼 보입니다. 당신은 당신의 코드에서 어떤 CSS를 누락 텍스트 입력

출처

2016-11-05 14:37:17 ilwcss

그걸 고쳤습니다. 감사! –

입력 요소에 여분의 공간이 필요합니다.

답변

관련 문제