연락처 양식의 div에 입력 할 입력란을 가져올 수 없습니다.

Question

방금 ​​HTML5와 CSS3에 대한 강의를 많이 마쳤습니다. 이제 연습을 시작했지만 실제로는 간단해야 할 부분이 있습니다. Google에서 수정 프로그램을 검색했지만 찾을 수 없습니다. 대부분 {박스 크기 : border-box;}를 추가하고 싶었지만 이미 사용했습니다.

HTML 코드 :

<div class="row"> 
    <form method="post" action="#" class="contact-form clearfix"> 
    <div class="row"> 
    <div class="col span-1-of-2">      
     <input type="text" name="name" id="name" placeholder="Name" required> 
    </div> 
    <div class="col span-1-of-2"> 
     <input type="email" name="email" id="email" placeholder="Email" required> 
    </div> 
    </div> 

    <div class="row"> 
     <textarea name="message" id="message" rows="4" placeholder="Message"></textarea> 
    </div> 

    <div class="row"> 
     <input type="submit" name="submit" id="submit" value="SEND MESSAGE"> 
    </div>     
    </form> 
</div> 

CSS 코드 : 양식과 같은 방법

/* THE STANDARD STUFF */ 

*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

html, body{ 
    background-color: #fff; 
    color: #777; 
    font-size: 16px; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 300; 
    text-rendering: optimizeLegibility; 
    overflow-x: hidden; 
} 

.clearfix{zoom:1;} 
.clearfix:after{ 
    content: '.'; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

.row{ 
    width: 1170px; 
    margin: 0 auto; 
} 


/* FROM GRID.CSS */ 

.row:before, 
.row:after { 
    content:""; 
    display:table; 
} 
.row:after { 
    clear:both; 
} 

.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%; 
} 

.col:first-child { margin-left: 0; } 

.span-1-of-2 { 
    width: 49.2%; 
} 

/* THE CONTACT STYLE */ 

.contact-form{ 
    width: 80%; 
    margin: 0 auto; 
} 

input[type=text], input[type=email], textarea{ 
    width: 100%; 
    padding: 10px; 
    margin-bottom: 15px; 
    border-radius: 3px; 
    border: 1px solid #ccc; 
} 

textarea{  
    height: 100px; 
} 

.contact-form #submit{ 
    border: 0; 
    margin-top: 20px; 
} 

*:focus{ 
    outline: none; 
} 

은 다음과 같습니다 당신이 볼 수 있듯이 http://codepen.io/anon/pen/apVzyg

, 필드 오른쪽으로 밀어되고있다, 행과 연락처 양식 컨테이너에 머 무르지 않고 80 %로 설정됩니다. 내 인생에서 왜 이런 일이 일어나고 있는지 알 수 없습니다. 어쩌면 실수가 내 앞에 있을지 모르지만 지금 터널 비전이 있습니다. 내가 라벨을 사용하지 않는 내가 COL 1의-2를 사용 제외 http://codepen.io/anon/pen/VPrYqm

그것은, 종류 광산의 유사 :

나는 당신이 여기에서 확인할 수 있습니다 강사의 스타일과 예에 따라이했다.

grid.css 파일은 responsivegridsystem (dot) com에서 다운로드됩니다.

기타 정보가 필요하면 알려 주시기 바랍니다.

모든 종류의 도움을 많이 주시면 감사하겠습니다.

감사합니다.

Answer 1

접촉 형태의 부모 컨테이너 클래스의 셀에만에 속하고 1170px의 고정 폭을 얻을 것이다 :

이 펜을 참조하십시오. 그러면 contact-form은 그 크기와 여백 자동의 80 %로 정의됩니다. 그래서 마진은 1170px의 20 %, 각 측면에서 10 %가 될 것입니다. 1170px 제한을 제거하여 문제를 해결할 수 있습니다. 보다 폭넓게 적용 할 수있는 레이아웃을 얻기 위해 최소 너비와 최대 너비 속성을 살펴볼 수 있습니다.

Answer 2

행 너비를 명시 적으로 설정하기 때문에 문제가 발생합니다.

width: 1170px; 

이 줄을 제거하면 원하는 HTML 렌더링을 얻을 수 있습니다. http://codepen.io/vici0us/pen/mRqJXK?editors=1100