Javascript 未能在Html5和CSS中生成结果？

这是我的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>

我的代码应与此图像相同：

---

给

.textboxClass

一个右浮动

.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
display: inline;
float:right;

}

---

应该这样做

给

.textboxClass

一个右浮点

.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
display: inline;
float:right;

}

display: inline

我们应该这样做

display: inline

使元素成为可包装的。在此上下文中，将忽略宽度和高度属性。如果您确实想使用它们，您基本上需要一个盒装显示器。您可以使用块（不能相邻流动）或内联块（可以）

因此，基本上将最后两个CSS类更改为：

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

使元素成为可包装的。在此上下文中，将忽略宽度和高度属性。如果您确实想使用它们，您基本上需要一个盒装显示器。您可以使用块（不能相邻流动）或内联块（可以）

因此，基本上将最后两个CSS类更改为：

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

看看这个

如果您只需将

'display:inline'

替换为

'display:inline block'

，并删除所有

标记，则效果良好

看看这个

---

如果您只需将

'display:inline'

替换为

'display:inline block'

，并删除所有

标记，则效果良好

display:inline表示忽略该类的宽度属性。您需要的是一个内联块。display:inline表示忽略该类的宽度属性。你想要的是一个内联块。虽然这可能会起作用，但它不会给OP任何关于其代码为何不起作用的线索。虽然这可能起作用，但它不会给OP任何关于其代码为何不起作用的线索。我不能得到所有文本框的相同高度吗？现在文本框之间的高度差是不同的我能得到所有文本框的相同高度吗？现在文本框之间的高度差异是不同的