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

这是一个小提琴。我认为你只需要删除

form fieldset

选择

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

Answer 2

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











<style>
  .blockLabel {
        display: block;
    margin-left: 140px;
    }

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

输入值未与标签值对齐

2 个答案: