jquery - 使用 jQuery 验证时的 CSS 对齐问题

Question

我有一个小问题:

我目前正在编写一个注册表单，我决定测试 jQuery 验证。不幸的是，返回的错误消息到处都是。不确定这是否是 CSS 问题，但我已经为对齐问题苦苦挣扎了几个小时，真的很感谢您的帮助。

如上图所示我正在尝试获取“此字段为必填项”。文本直接在文本字段下方对齐。

这是我目前使用的代码:

jQuery

// sign up validation
$(".signup").validate();

CSS

.myform {
    width: 400px;
    padding-top: 25px;
    padding-left: 20px;
}
#stylized h1 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}
#stylized p {
    font-size: 11px;
    color: #999;
    margin-bottom: 20px;
    border-bottom: solid 1px #b7ddf2;
    padding-bottom: 10px;
}
#stylized label {
    display: block;
    font-weight: bold;
    text-align: left;
    width: 160px;
    float: left;
}

#stylized label.error {
    float: none;
    font-size: 12px;
    color: red;
    margin-left: 1px;
}

#stylized .small {
    color: #999;
    display: block;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    width: 160px;
}
#stylized input {
    float: left;
    font-size: 16px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 200px;
    margin: 2px 0 20px 10px;
}
#stylized select {
    float: left;
    font-size: 16px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 75px;
    margin: 2px 0 20px 10px;
}
#stylized button {
    clear: both;
    margin-left: 169px;
    margin-top: 10px;
    cursor: pointer;
    color: #42230b;
    text-shadow: 1px 1px 0 #fff6b9;
    border: 1px solid #db9c2e;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #f7ce50;
    background: -webkitkit-gradient(linear, bottom, top, from(#f1ac33), to(#fef673));
    background: -moz-linear-gradient(bottom, #f1ac33, #fef673);
    font-size: 16px;
    padding: 5px 20px;
    font-weight: bold;
}
#stylized button:hover {
    clear: both;
    margin-left: 169px;
    margin-top: 10px;
    background: #edb954;
    background: -webkitkit-gradient(linear, bottom, top, from(#dc9f35), to(#fed273));
    background: -moz-linear-gradient(bottom, #dc9f35, #fed273);
    font-size: 16px;
    padding: 5px 20px;
    font-weight: bold;
}

HTML

<div id="stylized" class="myform" >
    <form class="signup" method="post" action="#">
    <label>Username
    <span class="small">Enter a username.</span>
    </label>
    <input type="text" name="name" id="name" class="required"/>
    <label>Email
    <span class="small">Enter a valid address.</span>
    </label>
    <input type="text" name="email" id="email" class="required"/>
    <label>Password
    <span class="small">Enter a secure password.</span>
    </label>
    <input type="password" name="password" id="password" class="required"/>
    <label>Confirm Password
    <span class="small">Enter your password again.</span>
    </label>
    <input type="password" name="password" id="password" class="required"/>
    <label>Age
    <span class="small">Select your age range.</span>
    </label>
    <select id="age" name="age" class="required">
    <option></option>
    <option>0 - 17</option>
    <option>18 - 25</option>
    <option>26 - 40</option>
    <option>40+</option>
    </select>                
    <button type="submit">Sign up</button>
    </form>
</div>

提前致谢!

更新

我正在使用这个插件:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 1

您需要更新 CSS 和 HTML。

这里是给的CSS更新，我完整给的HTML。

HTML 的更新是，我已经放置了 <input/>和 <select>在<div>下具有用于通用样式和更好对齐的“字段”类的元素。

CSS 更新

#stylized label.error {
    float: none;
    clear: both;
    font-size: 12px;
    color: red;
    margin-bottom: 10px;
    margin-left: 10px;
}

.field{
    display: block;
    width: auto;
    height: auto;
    float: left;
}

HTML

<div id="stylized" class="myform" >
    <form class="signup" method="post" action="#">
    <label>Username
    <span class="small">Enter a username.</span>
    </label>
    <div class="field">
        <input type="text" name="name" id="name" class="required"/>
    </div>
    <label>Email
    <span class="small">Enter a valid address.</span>
    </label>
    <div class="field">
        <input type="text" name="email" id="email" class="required"/>
    </div>
    <label>Password
    <span class="small">Enter a secure password.</span>
    </label>
    <div class="field">
        <input type="password" name="password" id="password" class="required"/>
    </div>
    <label>Confirm Password
    <span class="small">Enter your password again.</span>
    </label>
    <div class="field">
        <input type="password" name="password" id="password" class="required"/>
    </div>
    <label>Age
    <span class="small">Select your age range.</span>
    </label>
    <div class="field">
        <select id="age" name="age" class="required">
            <option></option>
            <option>0 - 17</option>
            <option>18 - 25</option>
            <option>26 - 40</option>
            <option>40+</option>
        </select>
    </div>
    <button type="submit">Sign up</button>
    </form>
</div>