无法在Html5和CSS中生成结果？

Question

Here is my html code and css code but i am failed to format this code all textboxes should align vertically but its not giving me proper result.Can someone please help me to correct this code:

<div id="wrapper" class="wrapperClass">


   <fieldset>
            <legend class="regLagendClass">Registration Form</legend>
       <form id="registrationForm" method="Post" action="https://www.google.com.pk/">
            <div class="divClass">
                <label for="firstName" class="labelClass">First Name:</label>
                <input type="text"  name="fName" class="textboxClass" id="firstName" placeholder="Your First Name"/>
            </div>

            <div class="divClass">
                <label for="lastName" class="labelClass">Last Name:</label>
                <input type="text" name="lName" id="lastName" class="textboxClass" placeholder="Your Last Name"/><br>
            </div>

            <div class="divClass">
                <label for="userName" class="labelClass">User Name:</label><br>
                <input type="text" name="userName" id="userName" class="textboxClass" placeholder="Your User Name" required/><br>
            </div>

            <div class="divClass">
                <label for="password" class="labelClass">Password:</label><br>
                <input type="password" id="password" name="password" class="textboxClass" placeholder="Type Password" required/><br>
            </div>

            <div class="divClass">
                <label for="cPassword" class="labelClass">Confirm Password:</label><br>
                <input type="password" id="cPassword" name="cPassword" class="textboxClass" placeholder="Retype Password"/><br>
            </div>

            <div class="divClass">
                <label for="gender" class="labelClass">Choose Gender:</label>
                <select name="gender" class="textboxClass">
                    <option>Male</option>
                    <option>Female</option>
                </select>
            </div>

            <div class="divClass">
                <label class="labelClass" for="dob">Date of Birth:</label><br>
                <input type="datetime" id="dob" class="textboxClass" placeholder="Your Date of Birth"/><br>
            </div>


            <div class="divClass">
                <label for="country" class="labelClass">Country:</label><br>
                <input type="text"  id="country" class="textboxClass"/><br>
            </div>

            <div class="divClass">
                <input type="submit" value="Sign Up">

            </div>
</form>
</fieldset>
</div>

CSS:

    .wrapperClass
{
    width:650px;
    height: 700px;
    margin-left: 300px;
    margin-right: 300px;
}
.divClass
{
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;

}
.labelClass
{
    width: 75px;
    display: inline;
}
.textboxClass
{
    padding-left: 3px;
    width:300px;
    height:20px;
    margin-left: 100px;
    display: inline;

}

My code should work as this image :

Answer 1

display: inline

causes your element to become wrappable. The width and height properties are disregarded in this context. If you do want to use them, you basically want a boxed display. You can either use block (which can not flow next to eachother) or inline-block (which can).

So basically change your last 2 CSS classes to:

.labelClass
{
    width: 75px;
    display: inline-block;
}
.textboxClass
{
    padding-left: 3px;
    width:300px;
    height:20px;
    margin-left: 100px;
    display: inline-block;
}