如何修改這個JQuery CSS到我的視圖中？

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-contain 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字段包含，其中包含另一個div類ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset最終包含我的輸入標記。

所以，我有以下2個疑惑：

1）爲什麼渲染過的版本是從我的代碼有什麼不同？爲什麼輸入標籤被包含在div類ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset

2）我嘗試使用以下CSS設置來獲取我的輸入標籤，但它之間利潤率還是不行：

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

我也tryed有：

<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

這給你一個默認間距。如果您想調整間距，您可以將包含DIV的字段的CSS作爲目標，並單獨保留輸入/標籤。

您的標記在Firebug中看起來不同的原因是因爲這就是jQM的工作原理。 jQM採用基本標記，並通過應用其CSS並根據需要添加DOM元素來「增強」它，以獲得移動外觀。

作爲一個選項，您可以在列表視圖中使用自己的listitem中的每一行創建一個表單。在標題爲表格的章節中查看jQM的列表視圖演示：http://demos.jquerymobile.com/1.4.3/listview/#Forms