Question

我正在使用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;
}

Answer 1

我假设您正在隐藏并在提交时显示相应的错误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;
}

jQuery Mobile - 保持布局网格垂直对齐

1 个答案: