html - 输入值与标签值不一致

Question

这是 HTML 和关联的 CSS。谁能指出我做错了什么？输入文本框出现在其相应标签下方。

form label.blockLabel {
    display: block;
    position: relative;
    width: 450px;
    margin: 12px 0px 12px 0px;
}

form fieldset#contactFields input {
    position: absolute;
    margin-left: 140px;
}

<form name="contactForm" id="contactForm" method="POST" action="mailto:eric.franklin@ucdenver.edu">
<p>* indicates a required field</p>

<fieldset id="contactFields">
    <legend>Contact Information</legend>                        
        <label class="blockLabel" for="fName">First Name<span>*</span></label>
            <input type="text" id="fName" name="fName" required="required" />                           
        <label class="blockLabel" for="lName">Last Name<span>*</span></label> 
            <input type="text" id="lName" name="lName" required="required" />
        <label class="blockLabel" for="email">Email Address<span>*</span></label>   
            <input type="email" id="email" name="email" required="required" />
        <label class="blockLabel" for="street">Street Address</label>   
            <input type="text" id="street" name="street" />
        <label class="blockLabel" for="city">City</label>   
            <input type="text" id="city" name="city" value="Denver" />
        <label class="blockLabel" for="state">State</label>     
            <input type="text" id="state" name="state" value="CO" maxlength="2" />
        <label class="blockLabel" for="zip">Zip</label> 
            <input type="text" id="zip" name="zip" maxlength="10" />
        <label class="blockLabel" for="phone">Phone</label> 
            <input type="tel" id="phone" name="phone" />                             
</fieldset>

Answer 1

这是一个 fiddle 。我想你只需要删除

form fieldset

选择器。

http://jsfiddle.net/plushyObject/cL6jm2r4/