如何将此 JQuery CSS 修改到我的视图中？

Question

我正在开发一个使用 JQuery Mobile 的网络应用程序。在这个 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-contain 输入{ 底部边距：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-contain 包含另一个 div 类 ui -input-text ui-body-inherit ui-corner-all ui-shadow-inset 最终包含我的输入标签。

所以我有以下2个疑问：

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 中，您应该将每个标签/输入对放在其自己的字段中包含：

<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

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

您的标记在 Firebug 中看起来不同的原因是 jQM 就是这样工作的。 jQM 采用基本标记并通过应用其 CSS 并根据需要添加 DOM 元素来“增强”它以获得移动外观和感觉。

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