并排居中表单字段上方的文本标签

Question

我阅读了How can I get two form fields side-by-side, with each field’s label above the field, in CSS?，这似乎与我所需要的很接近。不幸的是，我对此太陌生，无法理解其中的大部分内容。我的页面曾经使用表格，但不知何故它被更改并基于表单。

我只能使用 position:absolute 使标签居中，但这似乎不适用于较小的屏幕。此外，我想使用溢出：自动和固定标签，当你向下滚动页面时它没有意义。自动流并不重要，因为它能够将内容保持在较小的屏幕上。

请问有什么好办法吗？

这是页面：http://pintotours.net/coding/form.php 当前代码示例：

> <form method="post" action="./database.php">
>      <DIV style="position: absolute;  left:590px; width:40px; height:25px">Username</DIV> <DIV style="position: absolute; 
> right:545px; width:150px; height:25px">Repeat username</DIV> <br>
> 
>   <center>  <p><label for="Username"> </label><input type="text"
> name="username" />
>     <label for="Repeat Username"></label><input type="text" name="repeat-username" /></p>
> 
> <DIV style="position: absolute;  left:590px; width:40px;
> height:25px">Password</DIV> <DIV style="position: absolute; 
> right:557px; width:150px; height:25px">Repeat password</DIV> <br>
> 
>     <p><label for="Password"> </label><input type="text" name="password" />
>     <label for="Repeat Password"></label><input type="text" name="repeat-password" /></p><br>
>     
>     
>     </center>

Answer 1

使用表格进行简单快速的表单设计，或者使用带有 css 属性“float:left”的 div。不要使用 'absolute' 和 'left' 'right' css 属性。查看其他一些网站，了解他们是如何设计表单的。