0

我正在为表单验证项目使用 jQuery Mobile (JQM) 布局网格。问题是，当我在其中一个字段上方添加错误时，同一网格中的另一个字段看起来垂直未对齐：

我想保持字段内联，无论它们上面的错误如何，最好只使用 css/HTML/JQM。错误消息必须保留在 ui-block-a 或 b div 中。

这是HTML。除了 JQM 默认提供的以外，没有 CSS 样式：

<div class="ui-grid-a">
    <div class="ui-block-a">
        <label>
            City:
            <input type="text"/>
        </label>
    </div>
    <div class="ui-block-b">
        <div class="field-validation-error">The State field is required</div>
        <label>
            State:
            <select>
                <option selected="selected">Select a state...</option>
            </select>
        </label>
    </div>
</div>

我尝试了以下 css 覆盖，但它最终隐藏了错误消息。

.ui-grid-a {
position: relative;
}

.ui-block-a {
padding-right: 7px;
}

.ui-block-b {
padding-left: 7px;
position: absolute;
right: 0;
bottom: 0;
}
4

1 回答 1

0

我假设您在提交时隐藏并显示了相应的错误 div。

http://jsfiddle.net/B95jE/1/

<div class="error-div"> 
    <div class="state-validation-error">The State field is required</div>
    <div class="city-validation-error">The city field is required</div>
</div>
<br/>
<div class="ui-grid-a">
    <div class="ui-block-a">
        <label>
            City:
            <input type="text"/>
        </label>
    </div>
    <div class="ui-block-b">
        <label>
            State:
            <select>
                <option selected="selected">Select a state...</option>
            </select>
        </label>
    </div>
</div>

CSS：

.error-div{
    position:relative;
}
.ui-grid-a {
position: relative;
}

.ui-block-a {
float: left;
}

.ui-block-b {
float: right;
}

.state-validation-error{
    float:right;
}

.city-validation-error{
    float:left;
    display:none;
}
于 2013-07-20T01:20:55.010 回答