div 안에 div 내의 다른 요소 맞추기

Question

나는 PHP에 익숙하지 않다.

그리고 나는

아래로 물건을 보여주고있다

.wrapperReg{ 
    overflow: hidden; 
    width: 100%; 
    height: 100%;  
} 

을 따를

<div class="wrapperReg"> 

     <div id="searchContainer" style="display: inline; margin-top: 20px"> 
      <form> 
      <label class="ringSetName" style="font-size: 16pt;" >Firstname</label> 
      <input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>   
      </form> 
     </div> 

     <div id="searchContainer" style="display: inline; margin-top: 20px"> 
      <form> 
      <label class="ringSetName" style="font-size: 16pt;" >Lastname</label> 
      <input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>   
      </form> 
     </div> 

     <div id="searchContainer" style="display: inline; margin-top: 20px"> 
      <form> 
      <label class="ringSetName" style="font-size: 16pt;" >Email</label> 
      <input id="nameBox" style="width:250px; margin-top:10px; margin-left:30px; height:30px;" name="q" type="text"/>   
      </form> 
     </div> 

     <div id="searchContainer" style="display: inline; margin-top: 20px"> 
      <form> 
      <label class="ringSetName" style="font-size: 16pt;" >Phone</label> 
      <input id="nameBox" style="width:250px; margin-top:10px; margin-left: 30px; height:30px;" name="q" type="text"/>   
      </form> 
     </div> 

    <div class="submit" style="display: inline;" style="margin-top: 10px"> 
      <input type="button" value="Submit" class="submit-text"/> 
    </div> 

CSS는 내가 어떻게 할 수있는 폼을 표시하기 위해 다음과 같은 코드를 사용하고 모든 요소가 주 div 내부에서 수평으로 정렬되도록 정렬하십시오. 텍스트는 기본 정렬되어야하며 또한 입력 필드는 각각 수직으로 정렬되어야합니다.

또한 제출 버튼을 수평으로 정렬해야합니다.

Answer 1

float를 사용하는 것이 어떻습니까?

label{float: left;} 
label + input{float: right;} 

그리고 추가 오버 플로우 : 당신의 form에 숨겨진. 양식 요소를 하나의 양식으로 묶으십시오.

Answer 2

label {float: left; width: 200px; clear: left} 
label + input {float: left; width: 150px} 

ID는 전체 문서에서 고유해야하며 searchContainer에 클래스를 사용하십시오.