1

我已经开始设计一个表单，并且我已经以明显的方式（对我而言）完成了它，但这似乎真的是错误的方式。我不认为我应该使用表格，而是使用 CSS：

<form action="test.php">
    <table>
        <tr>
            <td>Name</td><td><input type="text" id="prjname" size="30"/></td>
            <td align="right">Design type</td><td align="right"><select id="prjdesigntype">
                <option value="0" selected="selected">- Select one -</option>
                </select></td>
        </tr>
        <tr>
            <td>Description</td><td colspan="3"><input type="text" size="80" id="prjdesc" /></td>
        </tr>
    </table>
</form>

任何人都可以提出更好的方法或执行上述操作吗？具体来说，我希望它看起来不错，例如将“选择”框与上面的描述框末尾对齐。

我试过使用 DIV，但我不知道如何将一行上的文本框与前一行上的文本框对齐。

4

3 回答 3

1

最好使用 textarea 标签来描述，因为 input 标签不适合长文本，而且看起来不太好。

于 2012-12-13T15:37:56.827 回答
0

可能你最好开始使用 div 和 css，因为这样你就可以更好地控制你的元素。试试这个代码。

<div style="width: 500px; height: auto; margin: auto;">
<form>
<input type="text" name="prjname" id="prjname" size="30" placeholder="Enter your name .." style="float:left; clear:none; padding-left: 15px;"/>
<select id="prjdesigntype"style="float: right; clear:none;" >
    <option value="0" selected="selected">- Select one -</option>
</select>
<input type="text" size="80" id="prjdesc" placeholder="Enter the description .." style="float:left; clear:both; width: 500px; padding-left: 15px;"/>

</form>
</div>
于 2012-12-13T14:14:13.733 回答
-1

试一试

    <form action="test.php">

    <div style="margin-bottom:5px;">
        <div style="float:right;">
            Design type
            <select id="prjdesigntype">
                <option value="0" selected="selected">
                    - Select one option
                </option>
            </select>
        </div>
        <div>
            Name
            <input type="text" id="prjname" size="30"/>
        </div>
    </div>

    <div>
        Description <input type="text" size="60" id="prjdesc" />
    </div>

</form>

一旦你了解它，div 和 CSS 就比表格容易得多：)

此外，这可能更多地属于http://ux.stackexchange.com，但是将所有表单元素放在一列而不是两列中往往会更好，因此您可能希望这样做。

于 2012-12-13T14:02:49.367 回答