형태 안의 Posistion 요소

Question

최대 며칠 동안 헤드 업.

텍스트 필드와 버튼이 하나있는 양식이 있습니다. 내 양식의 가운데에 텍스트 필드와 버튼을 나란히 놓으려고합니다.

.row { 
 
    width: 100%; 
 
    margin-bottom: 20px; 
 
    display: flex; flex-wrap: wrap; 
 
} 
 
.col-6 { 
 
    width: 50%; 
 
} 
 

 
.form { 
 
    margin 0 auto; 
 
    display: block; 
 
}

<div class='grid'> 
 
    <div class='row'> 
 
    <div class='col-6'> 
 
     <form class='form'> 
 
     <input type ='text' name='userGuess' class='userGuess'/> 
 
     <button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

나는 다른 것을 아무것도 많은 내가 너무 그것을 할 방법을 작동하는 것 같다했습니다.

참고 : : 전체 CSS 코드가 아니며 모든 기본 설정을 붙여 넣지 않았습니다.

감사합니다.

Answer 1

.row에 justify-content: center;을 추가하십시오. 그런 다음이 기사를 읽으십시오. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

두 개를 포함하도록 Div를 추가했습니다. 다음은 컨테이너 클래스의 업데이트 된 CSS입니다.

.row { 
    width: 100%; 
    margin-bottom: 20px; 
    display: flex; flex-wrap: wrap; 
    } 
    .col-6 { width: 50%; } 

.form { 
    margin 0 auto; 
    display: block; 
    } 
    .container{ 
    width:100%; 
    padding:1%; 
    } 

여기에 새 Div가 포함 된 업데이트 된 HTML이 있습니다.

<div class='grid'> 
    <div class='row'> 
    <div class='col-6'> 
    <form class='form'> 
    <div class="container"> 
    <input type ='text' name='userGuess' class='userGuess'/> 
    <button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button> 
    </div> 
    </form> 
    </div> 
    </div> 
    </div>