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

你想省略第一个输入周围的div - 它的显示：按块自然阻塞，并自动阻止对齐新行。 .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;
}

Answer 3

你只需要向左浮动第一个表格。 JSFIDDLE示例如何问你

#number{
 float:left;
}

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

3 个答案: