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

时间：2013-06-17 03:07:08

标签： html forms html-table

image

这是以下代码生成的内容。有人可以帮我把文字与所有屏幕尺寸的文本框对齐吗？最初我想设置每个文本的高度以与文本框对齐，但后来意识到它不会排列在不同大小的屏幕上。任何帮助表示赞赏。

<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');ret​urn 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>

4 个答案:

答案 0 :(得分：1)

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

<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正确设置所有内容，则可能甚至不需要换行符（<br />）。

答案 1 :(得分：0)

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

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

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

这里不需要表格。

答案 2 :(得分：0)

每个人都很难看到表格的表格，但忘了回答你的问题：一个名为vertical-align的css属性可以用来解决所有问题。在我的例子中，我将它设置为“顶部”。但您也可以使用像素（正值和负值）来更改对齐方式。例如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/

答案 3 :(得分：0)

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

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

相关问题
最新问题