1

我想为我的网页设计一个漂亮的表单，我想像这样。在此处输入图像描述

基本上，我希望描述输入字段以及输入字段的文本具有一些预定义的宽度。我没有为我的表单使用表格布局，而是使用标签作为方法。

发生的事情是这样的

在此处输入图像描述

我可以像我一样设置文本字段的大小。我不知道如何处理为文本或标签设置宽度。html 是这样的：

<form class="myform" method="POST" action="./php/prescribe.php">
        <label for="fname">First Name :</label>
        <input type="password" name="fname" size="35"><br>

        <label for="fname">Give your email address :</label>
        <input type="password" name="lname" size="35"><br>

        <label for="fname">First Name :</label>
        <input type="password" name="fname" size="35"><br>

        <label for="fname">First Name :</label>
        <input type="password" name="fname" size="35"><br>
</form>
4

2 回答 2

2

使用 CSS。此外，您可能希望在每一行周围使用一个包装器。这是一个快速而肮脏的例子。

CSS：

.form-row{}
.form-row-alt {} /* add alternating color here */
.form-row label, .form-row-alt label { display: inline-block; width: 150px; }

HTML：

<div class="form-row">
    <label>First Name:</label>
    <input type="text" name="username" />
</div>
于 2012-12-26T14:21:10.517 回答
1

您可以浮动标签：

.myform label {
  float: left;
  clear: both;
  width: 12em; /* or whatever */
}

浮动可能有点烦人，因为旧的 IE 版本有时会做一些愚蠢的事情。

或者你可以使用display: inline-block，我更喜欢：

.myform label {
  display: inline-block;
  width: 12em; /* or whatever */
}

有了这个，您需要<br>在输入之间添加元素，有些人可能会认为这很不愉快。

另一种选择是<dl>对整个事情使用一个块，尽管这并没有改变基本问题。

于 2012-12-26T14:18:44.387 回答