html - 显示 div 时，如何内联对齐两种不同形式的两个输入字段？

Question

我在 jsp 中有两种形式。

我希望两个表单中的输入字段都居中对齐并且在一行中。

我还隐藏了一个 div，它在单击输入字段 studentName 时显示。如果单击输入字段 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

添加垂直对齐:顶部；到表单的CSS

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

我更新了你的 fiddle http://jsfiddle.net/7zwvcs4n/2/