html - 如何水平排列文本和文本框？

Question

这就是以下代码产生的结果。有人可以帮我使文本与所有屏幕尺寸的文本框对齐吗？最初我想设置每个文本的高度以使其与文本框对齐，但后来意识到它不会在不同尺寸的屏幕上对齐。任何帮助表示赞赏。

<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>

score 1 · Accepted Answer

不要为此使用表格......使用简单的东西：

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

ETC...

<br />如果您使用 CSS 正确设置所有样式，您甚至可能不需要换行符 ( s)。

score 0 · Accepted Answer

您在这里不需要表格，但您可以查看下面的示例如何执行此操作：

<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。希望这有帮助！:)

score 0 · Accepted Answer

尝试使用带有for属性的标签。

此示例实际上会在您的文本字段旁边放置一个标签。

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

你不需要这里的桌子。

score 0 · Accepted Answer

每个人看到表格的表格都会发疯，但忘了回答您的问题：可以使用一个名为的 css 属性vertical-align来使所有内容对齐。在我的示例中，我将其设置为“顶部”。但是您也可以使用像素（正值和负值）来更改对齐方式。例如vertical-align: 1px;或vertical-align:-1px;

无论如何，您不应该为此使用表格（尤其是您使用表格的方式）。你可以很简单地使用 divs/spans/etc 来实现同样的事情：

HTML（来自您附加的代码的片段）

<form action="send-form.php" id="form" method="post" name="form">
    <div class="fields">
        <label>Your name:</label>
        <span><input id="name" name="name" size="35" type="text" value="" /></span>
    </div>
    <div class="fields">
        <label>Email Address:</label>
        <span><input id="email" maxlength="55" name="email" size="35" type="text" /></span>
    </div>
    <div class="fields">
        <label>Comments:</label>
        <span><textarea></textarea></span>
    </div>    
</form>

CSS来设置上面的样式

.fields {width: 500px;}
.fields > label { display:inline-block; width:150px; font-weight:bold; vertical-align:top; }
.fields > span { display: inline-block; }

预览：http: //jsfiddle.net/JESqY/5/

html - 如何水平排列文本和文本框？

4 回答 4

Related

Reference