Question

我看了How can I get two form fields side-by-side, with each field’s label above the field, in CSS?，这似乎与我的需求接近。不幸的是，我太新了，无法理解其中的大部分内容。我的页面曾经用于处理表格，但不知何故它已经改变了，并且它以形式为基础进行修剪。

我只能使用position：absolute来居中标签，但这似乎不适用于较小的屏幕。此外我想使用overflow：auto和固定标签，当你向下滚动页面时没有意义。自动流程并不是那么重要，因为它能够在较小的屏幕中保持原样。

有什么想法可以提供帮助吗？

这是页面：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

使用表格进行简单快速的表单设计，否则使用div与css属性'float：left'。不要使用'绝对'和'左''右'css属性。检查其他一些网站，了解他们如何设计表格。

将文本标签并排放在表单字段上方

1 个答案: