div가 표시되면 두 개의 다른 양식의 두 입력 필드를 정렬하는 방법은 무엇입니까?

Question

jsp에는 두 가지 형식이 있습니다.

양쪽 입력 필드를 가운데 맞춤 및 한 줄로 입력하고 싶습니다.

입력란 studentName을 클릭하면 표시되는 div도 숨 깁니다. 입력 필드 regNo를 클릭하면 div를 숨겨야합니다. 기본적으로 DIV 내가 입력 필드 이름에 뭔가를 입력 할 때 지금

을 숨길 필요가, 두 개의 입력의 정렬 변경 필드 심하게

JSP 코드

<div id="mycontainer"> 
    <form method="get" action="number" id="number"> 
    <!-- <div id="regNoErrorMsgNumber">Only numbers are allowed</div> --> 
      <div style="text-align: center;" > 
        <!-- //TODO: Only number, no spaces, no special symbol and 12 digit check-->     

          <input width="20" type="text" data-validation="numbers" id="regNo" name="regNo" size="30" maxLength="50" placeholder="Enter Register Number"> <b>OR</b>  

      </div> 

    </form>   

    <form method="post" action="name" id="name">     
       <input type="text" id="studentName" name="studentName" size="30" maxLength="50" placeholder="Enter Student Name" > 


      <c:set var="salary" scope="session" value="${param.studentName}"/> 

     <div id="dropDown" style="display:none"> 
      <div id="studentNameError"> 
       <c:if test="${searchBy.hasError}"> 
        <c:out 
         value="There are more than 100 results by this name. We suggest you to filter by College Name and/or Department Name" /> 
       </c:if> 
       <br /> 
      </div> 

      <div> 
       <b>Filter students by College :</b> <select id="byCollege" name="byCollege"> 
        <c:forEach items="${uniqueCollList}" var="uniqueCollList"> 
         <option value="${uniqueCollList}">${uniqueCollList}</option> 
        </c:forEach> 
       </select> 
      </div> 
      <br /> 

      <div> 
       <b>Filter students by Department :</b> <select id="byDept" name="byDept"> 
        <c:forEach items="${uniqueDeptList}" var="uniqueDeptList"> 
         <option value="${uniqueDeptList}">${uniqueDeptList}</option> 
        </c:forEach> 
       </select> 
      </div> 
      <br /> 
     </div>   
    </form>     
</div> 

CSS 코드

#mycontainer, h1, h3 { 
      text-align:center; 
     } 
     form{ 
      display:inline-block; 
     }  

JS 코드

$('#dropDown').hide(); 
    $(document).ready(function(){ 
     $('#inputFields').click(function(event){ 
      if (document.getElementById('regNo').value !=""){   

       $("#number").submit(); 

      }else if(document.getElementById('studentName').value !=""){ 
       $("#name").submit(); 
      } 
     }); 
    });  
    $(document).ready(function(){ 
      $('#regNo').click(function(event){    
      $('#studentName').val(''); 
      $('#dropDown').hide(); 
      }); 
      $('#studentName').click(function(event){    
      $('#regNo').val(''); 
      $('#dropDown').show(); 
      }); 

    }); 

다음은 코드입니다. http://jsfiddle.net/7zwvcs4n/

Answer 1

수직 정렬 추가 : 위쪽; 형태

#mycontainer, h1, h3 { 
     text-align:center; 
    } 
    form{ 
     vertical-align:top; 
     display:inline-block; 
     max-width: 49%; 
     text-align:left; 
    } 

에 대한 CSS에 나는 당신의 바이올린 http://jsfiddle.net/7zwvcs4n/2/