Html 如何水平排列文本和文本框？_Html_Forms_Html Table

Html 如何水平排列文本和文本框？

html forms

Html 如何水平排列文本和文本框？,html,forms,html-table,Html,Forms,Html Table,这是下面代码生成的内容。有人能帮我把所有屏幕尺寸的文本框排成一行吗？最初我想设置每个文本的高度，使其与文本框对齐，但后来我意识到它不会在不同大小的屏幕上对齐。感谢您的帮助 <body> <h1>Contact Us</h1> <p>Please take a few moments to fill out our feedback form. It will help us to better address your needs. T

这是下面代码生成的内容。有人能帮我把所有屏幕尺寸的文本框排成一行吗？最初我想设置每个文本的高度，使其与文本框对齐，但后来我意识到它不会在不同大小的屏幕上对齐。感谢您的帮助

<body>

<h1>Contact Us</h1>

<p>Please take a few moments to fill out our feedback form. It will help us to better     address your needs. Thank you.</p>

<div id="mainLeft">
<table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
<tbody>
    <tr>
        <td height="40" scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> &nbsp;</span></strong></td>
        <td height="269" rowspan="10" scope="col" width="267">
        <form action="send-form.php" id="form" method="post" name="form">
        <p><input id="name" name="name" size="35" type="text" value="" />        </p>

        <p><input id="email" maxlength="55" name="email" size="35" type="text" /></p>

        <p><input id="address" maxlength="55" name="address" size="35" type="text" /></p>

        <p><input id="city" maxlength="55" name="city" size="35" type="text" /></p>

        <p><input id="state" maxlength="55" name="state" size="15" type="text" /></p>

        <p><input id="zip" maxlength="55" name="zip" size="25" type="text" /></p>

        <p><input id="telephone" maxlength="55" name="telephone" size="35" type="text" /></p>

        <p><input id="fax" maxlength="55" name="fax" size="35" type="text" /></p>

        <p><input id="feedback" maxlength="55" name="feedback" size="35" type="text" /></p>

        <p><textarea cols="30" id="comments" name="comments" rows="7" wrap="virtual"></textarea></p>
        <input name="Submit" onclick="MM_validateForm('email','','RisEmail','phone','','NisNum','comments','','R');return document.MM_returnValue" tabindex="1" type="submit" value="Submit" />&nbsp;</form>
        </td>
    </tr>

    <tr>
        <td height="0" scope="col"><strong><span class="style6">Email Address: &nbsp;</span><br /></strong></td>
    </tr>
    <tr>
        <td height="0" scope="col"><strong><span class="style6">Mailing Address: &nbsp;</span><br /></strong></td>
    </tr>
    <tr>
        <td height="0" scope="col"><strong><span class="style6">City: &nbsp;</span></strong></td>
    </tr>
    <tr>
        <td height="0" scope="col"><strong><span class="style6">State: &nbsp;</span></strong></td>
    </tr>
    <tr>
        <td height="0" scope="col"><strong><span class="style6">Zip Code: &nbsp;</span></strong></td>
    </tr>
    <tr>
        <td height="0" scope="col"><strong><span class="style6">Telephone: &nbsp;</span></strong></td>
    </tr>
    <tr>
        <td height="0"scope="col"><strong><span class="style6">Fax: &nbsp;</span></strong></td>
    </tr>
            <tr>
        <td height="0" scope="col"><strong><span class="style6">How did you hear about us?: &nbsp;</span></strong></td>
    </tr>

        <td scope="col"><span class="style6"><strong>Explanation of your legal situation: </strong></span><strong><span class="style4">&nbsp;</span></strong></td>
    </tr>
    <tr>
        <td align="right">&nbsp;</td>
        <td align="right" height="35">&nbsp;</td>
        <td align="left" height="35">&nbsp;</td>
    </tr>
</tbody>
</table>
</div>
</body>


联系我们
请花点时间填写我们的反馈表。这将帮助我们更好地满足您的需求。多谢各位
您的姓名：










电子邮件地址：

邮寄地址：

城市：
状态：
邮政编码：
电话：
传真：
你是怎么听说我们的？：
您的法律情况说明：

不要用表格来表示。。。使用以下简单的方法：

<label for="name">Your name:</label><input type="text" name="name" /><br />
<label for="email">Email address:</label><input type="text" name="email" /><br />

您的姓名：

电子邮件地址：

等等

如果使用CSS正确设置所有内容的样式，您甚至可能不需要换行符（

s）。

尝试使用带有

for

属性的标签

本例实际上会在文本字段旁边放置一个标签

<label for="myField">foo</label>
<input type="text" name="myField" id="myField" />

foo

这里不需要表格。

每个人都会疯狂地查看表格以获取表单，但忘记回答您的问题：可以使用名为“垂直对齐”（vertical align）的css属性来对齐所有内容。在我的示例中，我将其设置为“top”。但也可以使用像素（正值和负值）来更改对齐方式。e、 g

垂直对齐：1px或垂直对齐：-1px
无论如何，您不应该使用表来实现这一点（尤其是您使用它们的方式）。您只需使用div/span/etc即可实现相同的功能：
HTML（来自所附代码的片段）
预览：
此处不需要表格，但您可以查看下面的示例，了解如何执行此操作：
<html>
    <body>

        <h1>Contact Us</h1>

        <p>Please take a few moments to fill out our feedback form. It will help us to better     address your needs. Thank you.</p>

        <div id="mainLeft">
            <form action="send-form.php" id="form" method="post" name="form">
            <table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
                <tbody>
                    <tr>
                        <td scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> &nbsp;</span></strong></td>
                        <td><input id="name" name="name" size="35" type="text" value="" /></td>
                    </tr>

                    <tr>
                        <td scope="col"><strong><span class="style6">Email Address: &nbsp;</span><br /></strong></td>
                        <td><input id="email" maxlength="55" name="email" size="35" type="text" /></td>

                    </tr>
                    <tr>
                        <td scope="col"><strong><span class="style6">Mailing Address: &nbsp;</span><br /></strong></td>
                        <td><input id="address" maxlength="55" name="address" size="35" type="text" /></td>
                    </tr>
                    <tr>
                        <td scope="col"><strong><span class="style6">City: &nbsp;</span></strong></td>
                        <td><input id="city" maxlength="55" name="city" size="35" type="text" /></td>
                    </tr>
                    <tr>
                        <td scope="col"><strong><span class="style6">State: &nbsp;</span></strong></td>
                        <td><input id="state" maxlength="55" name="state" size="15" type="text" /></td>
                    </tr>
                    <tr>
                        <td scope="col"><strong><span class="style6">Zip Code: &nbsp;</span></strong></td>
                        <td><input id="zip" maxlength="55" name="zip" size="25" type="text" /></td>
                    </tr>

                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>


联系我们
请花点时间填写我们的反馈表。这将帮助我们更好地满足您的需求。多谢各位
您的姓名：
电子邮件地址：

邮寄地址：

城市：
状态：
邮政编码：

正确的方法是：
<label for="test">Test</label>
<input type="text" name="test"/><br/>

测试



通过搜索/阅读一些CSS教程来正确设置html的格式。
希望这有帮助！：）
 tables用于表格数据，而不是表单。非常感谢！这很好地解决了问题，尽管它导致表单旁边的一些东西移到了表单下面，但我想我可以找到一个解决方法。
<html>
    <body>

        <h1>Contact Us</h1>

        <p>Please take a few moments to fill out our feedback form. It will help us to better     address your needs. Thank you.</p>

        <div id="mainLeft">
            <form action="send-form.php" id="form" method="post" name="form">
            <table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
                <tbody>
                    <tr>
                        <td scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> &nbsp;</span></strong></td>
                        <td><input id="name" name="name" size="35" type="text" value="" /></td>
                    </tr>

                    <tr>
                        <td scope="col"><strong><span class="style6">Email Address: &nbsp;</span><br /></strong></td>
                        <td><input id="email" maxlength="55" name="email" size="35" type="text" /></td>

                    </tr>
                    <tr>
                        <td scope="col"><strong><span class="style6">Mailing Address: &nbsp;</span><br /></strong></td>
                        <td><input id="address" maxlength="55" name="address" size="35" type="text" /></td>
                    </tr>
                    <tr>
                        <td scope="col"><strong><span class="style6">City: &nbsp;</span></strong></td>
                        <td><input id="city" maxlength="55" name="city" size="35" type="text" /></td>
                    </tr>
                    <tr>
                        <td scope="col"><strong><span class="style6">State: &nbsp;</span></strong></td>
                        <td><input id="state" maxlength="55" name="state" size="15" type="text" /></td>
                    </tr>
                    <tr>
                        <td scope="col"><strong><span class="style6">Zip Code: &nbsp;</span></strong></td>
                        <td><input id="zip" maxlength="55" name="zip" size="25" type="text" /></td>
                    </tr>

                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

<label for="test">Test</label>
<input type="text" name="test"/><br/>