文本未在html中正确对齐对象

Question

所以我正在尝试使用消息框创建一个表单，但它不能正确对齐;它不断将文本推到它占用的区域的底部.. 我已经接受了很长一段时间在文本字段和消息字段之间的中断，但是有一个中断，所以它没有在那里对齐......

JSFiddle：http://jsfiddle.net/2U2PJ/

    <form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','E-mail','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
                            <p>
                                <label><font size="3">Name: </font>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="Name" type="text" id="Name" size="25" /><font size="2"> <font color="red"><span id="req_3" class="req">*</span></font></font></label>
                            </p>
                            <p>
                                <label><font size="3">Email:</font>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="E-mail" type="text" id="E-mail" size="25" /> <font size="2"><font color="red"><span id="req_3" class="req">*</span></font></font></label>
                            </p>
                            <p>
                                <label><font size="3">Review:</font>
                                &nbsp;&nbsp;&nbsp;&nbsp;<textarea name="Message" cols="35" rows="7" id="Message" placeholder="Y U SO BROKE MR. THINGY D;"></textarea>
                            </p>
                                </label>
                            <label>
                                <input name="Submit" type="submit" id="Submit" value="Submit" />
                            </label>
                        </form>

Answer 1

根据我的评论。使用CSS。这应该让你走上正确的道路：

http://jsfiddle.net/2U2PJ/3/

的CSS：

.contact-form .field label { width: 100px; display:inline-block; vertical-align: top; }
.contact-form .req { color: red; }
.contact-form .field .textbox { width: 180px; }

HTML：

<div class="contact-form">
<form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','Email','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
    <div class="field">
        <label for="Name">Name:</label>
        <input name="Name" type="text" id="Name" class="textbox" />
        <span id="req_3" class="req">*</span>
    </div>
    <div class="field">
        <label for="Email">Email:</label>
        <input name="Email" type="text" id="Email" class="textbox" />
        <span id="req_3" class="req">*</span>
    </div>
    <div class="field">
        <label for="Message">Review:</label>
        <textarea name="Message" cols="35" rows="7" id="Message" placeholder="Y U SO BROKE MR. THINGY D;"></textarea>
    </div>
    <div>
        <input name="Submit" type="submit" id="Submit" value="Submit" />
    </div>
</form>
</div>

Answer 2

完整代码，以简化您的问题！

http://jsfiddle.net/SinisterSystems/jLXsV/2/

<强> HTML：

<form action="sending.php" method="post" name="Contact Form" id="form1" onsubmit="MM_validateForm('Name','','R','E-mail','','R','Device','','R','Message','','R')return document.MM_returnValue" encytype="text/plain">
    <p>
    <label>Name:</label>
        <input type="text" />
    </p>

    <p>
    <label>Email:</label>
        <input type="text" />
    </p>

    <p>
    <label>Review:</label>
        <textarea rows="7" cols="35"></textarea>
    </p>

    <p>
    <input name="Submit" type="submit" id="Submit" value="Submit" />
    </p>

<强> CSS：

input, textarea {
    width:200px;
    margin-left:15px;
}
label {
    float:left;
    min-width:100px;
}

使用您的ID

小提琴：http://jsfiddle.net/SinisterSystems/jLXsV/3/