如何在同一行中对齐两个表单的两个输入字段？

Question

以下是从一个HTML页面

<form method="get" action="search/s" id="number"> 
     <div style="text-align: center;"> 
       <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or  
     </div>  
    </form>   

    <form method="get" action="search/l" id="name"> 

       <input type="text" id="studentName" name="studentName" size="30" maxLength="50" > 

    </form>  

我希望两个领域是在一条线一个其他和中心对齐后两种形式。我怎样才能做到这一点？

Answer 1

将它们放在一个额外的容器元素中，例如div和text-align:center。然后，只需将display:inline-block指定为form元素即可覆盖默认的block渲染，从而强制它们显示为新行。

Sample fiddle。

Answer 2

你只需要浮动左第一个窗体。 JSFIDDLE例如如何ü问

#number{ 
float:left; 
} 

Answer 3

你想省略围绕第一输入股利 - 它显示：自然块和块上一个新行自动对齐。 .container div应该有一个固定的宽度（或者px或者％），以便居中工作。

<div class="container"> 
<form method="get" action="search/s" id="number"> 

      <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or  

</form>   

<form method="get" action="search/l" id="name"> 

      <input type="text" id="studentName" name="studentName" size="30" maxLength="50" > 

</form> 
</div> 
<style> 

    .container { 
    text-align: center; 
}