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

我正在开发一个使用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>

标题：
BugTraqID：
状态ID：
.....................................................................................
.....................................................................................
.....................................................................................

这样，输入标记和下一个标记之间就没有空间了。因此，我尝试在所有输入标记中添加一个边距底部，如下所示：

<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>

.ui字段包含输入{ 边缘底部：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>

标题：
BugTraqID：

因此，如您所见，呈现的版本与我的原始代码非常不同，因为存在外部div having classui字段contain，其中包含另一个div having classui输入文本ui body inherit ui corner all ui shadow inset，最终包含我的输入标记

因此，我有以下两个疑问：

1） 为什么呈现的版本与我的代码不同？为什么输入标记包含在具有类的div中ui输入文本ui body继承ui角所有ui阴影插入

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

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

.ui字段包含.ui输入文本ui正文继承ui角点所有ui阴影插入输入{
边缘底部：15px；
}

我还尝试了：

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

.ui字段包含.ui输入文本输入{
边缘底部：15px；
}

但还是有同样的问题

---

如何解决此问题？

在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>

标题：
BugTraqID：
状态ID：

这里有一个

这将为您提供默认间距。如果要调整间距，可以将字段contain DIV的CSS作为目标，而不使用输入/标签

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

---

作为一个选项，您可以在listview中构建一个表单，其中每一行都在自己的listitem中。请参阅标题为“表单”部分中listview的jQM演示：

Tnx非常多，完美的解释