javascript - Html5 和 CSS 无法生成结果？

Question

这是我的 html 代码和 css 代码，但我未能格式化此代码所有文本框应垂直对齐但它没有给我正确的结果。有人可以帮我更正此代码:

<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;

}

我的代码应该像这张图片一样工作:

Answer 1

检查一下 http://jsfiddle.net/kabeer182010/gd4Xe/ .

如果你只是替换'display: inline'与 'display: inline-block'并删除所有 <br>标记这很好用。