Question

我正在使用 JQuery Mobile 的Web应用程序。在这个Web应用程序中，我有一个显示输入表单掩码的视图。像这样：

<div class="ui-field-contain">
    <label for="Title">Title:</label>
    <input type="text" id="Title" name="Title" style="margin-bottom:15px;" value="@Model.Title" />

    <label for="BugTraqID">BugTraqID:</label>
    <input type="number" id="BugTraqID" name="Title" min="0" step="1" style="margin-bottom:15px;" value="@Model.BugTraqID" />

    <label for="StatusID">StatusID:</label>
    <input type="number" id="StatusID" name="Title" min="0" max="10" step="0.1" style="margin-bottom:15px;" value="@Model.StatusID" />

    .....................................................................................
    .....................................................................................
    .....................................................................................
</div>

这样，输入标签和下一个输入标签之间就没有空格了。所以我尝试在所有输入标签上添加一个margin-bottom，如下所示：

.ui-field-contains input { margin-bottom：15px; }

但是这样做我没有得到任何结果，我仍然没有保证金。

在上一页上使用FireBug我获得以下代码：

<div class="ui-field-contain">
    <label for="Title">Title:</label>
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
        <input id="Title" type="text" value="Microsoft Internet Explorer CVE-2014-0310 Memory Corruption Vulnerability -TEST" style="margin-bottom:15px;" name="Title">
    </div>

    <label for="BugTraqID">BugTraqID:</label>
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
        <input id="BugTraqID" type="number" value="67299" style="margin-bottom:15px;" step="1" min="0" name="Title">
</div>

所以，正如你所看到的，渲染版本与我的原始代码非常不同，因为外部div具有类 ui-field-contains ，其中包含另一个具有类 ui的div -input-text ui-body-inherit ui-corner-all ui-shadow-inset 最终包含我的输入标记。

所以我有以下两个疑问：

1）为什么渲染版本与我的代码不同？为什么输入标签包含在具有类 ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset

的div中

2）我尝试使用以下CSS设置来获取输入标记之间的边距，但它仍然不起作用：

<style>
    .ui-field-contain .ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset input {
        margin-bottom: 15px;
    }
</style>

我也尝试过：

<style>
    .ui-field-contain .ui-input-text input{
        margin-bottom: 15px;
    }
</style>

但仍有同样的问题

如何解决此问题？

Answer 1

在jQuery Mobile中，您应该将每个标签/输入对放在它自己的fieldcontain中：

<div class="ui-field-contain">
    <label for="Title">Title:</label>
    <input type="text" id="Title" name="Title" value="@Model.Title" />
</div>
<div class="ui-field-contain">
    <label for="BugTraqID">BugTraqID:</label>
    <input type="number" id="BugTraqID" name="Title" min="0" step="1" value="@Model.BugTraqID" />
</div>
<div class="ui-field-contain">
    <label for="StatusID">StatusID:</label>
    <input type="number" id="StatusID" name="Title" min="0" max="10" step="0.1" value="@Model.StatusID" />
</div>

这是 DEMO

这为您提供了默认间距。如果要调整间距，可以将字段的CSS定位为包含DIV并保留输入/标签。

你的标记在Firebug中看起来不同的原因是因为jQM的工作方式。 jQM采用基本标记和＆＃34;增强＆＃34;它通过应用CSS并根据需要添加DOM元素来获得移动外观。

作为一个选项，您可以在listview中构建一个表单，其中每个行都在其自己的listitem中。请参阅标题为“表单：http://demos.jquerymobile.com/1.4.3/listview/#Forms

”一节中的列表视图的jQM演示

如何将这个JQuery CSS修改为我的视图？

1 个答案: