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;

}

我的代码应该像这张图片一样工作： Required Form Image

Answer 1

请查看http://jsfiddle.net/kabeer182010/gd4Xe/。

如果您只是将'display: inline'替换为'display: inline-block'并删除所有<br>代码，则可以正常使用。

Answer 2

display: inline

使您的元素变得可以包装。在此上下文中忽略width和height属性。如果你想使用它们，你基本上想要一个盒装显示器。你可以使用块（它不能彼此相邻）或内联块（可以）。

所以基本上将你最近的2个CSS类更改为：

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

Answer 3

让.textboxClass向右浮动

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

}

应该做的伎俩

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

3 个答案: