css3에서 텍스트 입력 상자가 나란히 정렬되지 않음

Question

css3을 사용하여 한 페이지에 2 개의 텍스트 입력 상자가 나란히 필요합니다. 두 번째 상자가 첫 번째 입력 상자 아래로 오는 것을 제외하고는 모든 준비가되었습니다. 이 문제를 CSS에서 어떻게 해결할 수 있습니까?

HTML :

<div class="main"> 
    <div class="one"> 
    <div class="register"> 
    <h3>Create your account</h3> 
     <form id="reg-form"> 
      <div> 
      <div> 
      <label for="username">Username</label> 
      <input type="text" id="username" spellcheck="false" placeholder="User Name" /> 
      </div> 
      <div> 
      <label for="password">Password</label> 
      <input type="password" id="password" /> 
      </div> 
      <div> 
      <label></label> 
      <input type="submit" value="Shop Login" id="create-account" class="button"/> 
      </div> 
     </form>  
    </div> 
</div> 

<div class="two"> 
    <div class="register"> 
     <h3>Create your account</h3> 
     <form id="reg-form1"> 
      <div> 
      <label for="name1">Name</label> 
      <input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/> 
      </div> 
      <div> 
      <label for="email1">Email</label> 
      <input type="text" id="email1" spellcheck="false" placeholder="mymail@mail.com"/> 
      </div> 
      <div> 
      <label for="username1">Username</label> 
      <input type="text" id="username1" spellcheck="false" placeholder="User Name" /> 
      </div> 
      <div> 
      <label for="password1">Password</label> 
      <input type="password" id="password1" /> 
      </div> 
      <div> 
      <label for="password-again1">Password Again</label> 
      <input type="password" id="password-again1" /> 
      </div> 
      <div> 
      <label></label> 
      <input type="submit" value="Create Account" id="create-account1" class="button"/> 
      </div> 
     </form> 
     </div> 
    </div> 
</div> 

CSS는

.main > div { 
    display: inline-block; 
    width: 49%; 
    margin-top: 10px; 
} 

.two .register { 
    border: none; 
} 
.two .register h3 { 
    border-bottom-color: #909090; 
} 
.two .register .sep { 
    border-color: #909090; 
} 

.register { 
    width: 400px; 
    margin: 10px auto; 
    padding: 10px; 
    border: 7px solid #ADD8E6; 
    border-radius: 10px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #444; 
    background-color: #f0f0f0; 
    box-shadow: 0 0 20px 0 #000000; 
} 
.register h3 { 
    margin: 0 15px 20px; 
    border-bottom: 2px solid #72b372; 
    padding: 5px 10px 5px 0; 
    font-size: 1.1em; 
} 
.register div { 
    margin: 0 0 15px 0; 
    border: none; 
} 
.register label { 
    display: inline-block; 
    width: 25%; 
    text-align: right; 
    margin: 10px; 
} 
.register input[type=text], .register input[type=password] { 
    width: 65%; 
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif; 
    padding: 5px; 
    font-size: 0.9em; 
    border-radius: 5px; 
    background: rgba(0, 0, 0, 0.07); 
} 
.register input[type=text]:focus, .register input[type=password]:focus { 
    background: #FFFFFF; 
} 
.register .button { 
    font-size: 1em; 
    border-radius: 8px; 
    padding: 10px; 
    border: 1px solid #ADD8E6; 
    box-shadow: 0 1px 0 0 #05B8CC inset; 
    background: #05B8CC; 
    background: -webkit-linear-gradient(#ADD8E6, #05B8CC); 
    background: -moz-linear-gradient(#ADD8E6, #05B8CC); 
    background: -o-linear-gradient(#ADD8E6, #05B8CC); 
    background: linear-gradient(#ADD8E6, #05B8CC); 
} 
.register .button:hover { 
    background: #51db1c; 
    background: -webkit-linear-gradient(#51db1c, #6ba061); 
    background: -moz-linear-gradient(#51db1c, #6ba061); 
    background: -o-linear-gradient(#51db1c, #6ba061); 
    background: linear-gradient(#51db1c, #6ba061); 
} 
.register .sep { 
    border: 1px solid #72b372; 
    position: relative; 
    margin: 35px 20px; 
} 
.register .or { 
    position: absolute; 
    width: 50px; 
    left: 50%; 
    background: #f0f0f0; 
    text-align: center; 
    margin: -10px 0 0 -25px; 
    line-height: 20px; 
} 
.register .connect { 
    width: 400px; 
    margin: 0 auto; 
    text-align: center; 
} 

나는 그것을 필요로 jsFiddle Demo

데모에서와 같이 측면보다는 위쪽에서 아래쪽으로 나란히 정렬 제공하고 있습니다. 미리 감사드립니다.

Answer 1

<div class="two"> 전에 div 마감을 놓쳤습니다. 닫는 div를 추가하면 두 양식이 서로 옆에 표시됩니다. , http://jsfiddle.net/t5SNE/7/