0

所以我在这里遇到了一个令人困惑的问题。我正在使用 HTML 和 JQuery Mobile 创建一个表。然而，它的元素不断重叠，并且内容没有应用 UI CSS。我是否遗漏了一些明显的东西，或者我不熟悉的 JQuery 移动库有什么东西？ 

<table><tr><td><input type="radio"/></td><td>Less than $25,000</td></tr>
    <tr><td><input type="radio"></td><td>$25,000 - $49,999</td></tr>
    <tr><td><input type="radio"></td><td>$50,000 - $74,999</td></tr>
    <tr><td><input type="radio"></td><td>$75,000 - $100,000</td></tr>
    <tr><td><input type="radio"></td><td>More than $100,000</td></tr>
    <tr><td><input type="radio"></td><td>I am not required to share this information</td></tr>
</table></form>

这是正在发生的事情的代码和图像。

4

1 回答 1

1

首先你发出：

单选选项需要有这个标记才能让 jQM 正确显示

HTML

<fieldset data-role="controlgroup" data-mini="true">
        <input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" checked="checked" />
        <label for="radio-mini-1">Credit</label>

    <input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2"  />
        <label for="radio-mini-2">Debit</label>

        <input type="radio" name="radio-mini" id="radio-mini-3" value="choice-3"  />
        <label for="radio-mini-3">Cash</label>
</fieldset>

现在（我认为）您正在使用 table 标签在屏幕上布局或显示元素。我建议不要这样做，因为它用于指法数据。我想这就是你要找的：

HTML

<div data-role="page" class="type-home">

   <div data-role="content">
      <fieldset data-role="controlgroup">
    <legend>Annual Salary:</legend>
         <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
         <label for="radio-choice-1">Less tahn $24,999</label>

         <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
         <label for="radio-choice-2">$25,000 - $49,999</label>

         <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
         <label for="radio-choice-3">$50,000 - $74,999</label>

         <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
         <label for="radio-choice-4">$75,000 - $99,999</label>

          <input type="radio" name="radio-choice" id="radio-choice-5" value="choice-5"  />
         <label for="radio-choice-5">More than $100,000</label>

          <input type="radio" name="radio-choice" id="radio-choice-6" value="choice-6"  />
         <label for="radio-choice-6">I am not required to share this information
</label>
</fieldset>
   </div>
</div>​

并且表格在 jQM 中没有很好地记录（尚未），但您会发现显示需要一些额外的属性。

（在 Chrome 中查看）

  • 查看源：http://jquerymobile.com/demos/1.2.0/docs/content/content-html.html

HTML：

<table summary="This table lists all the JetBlue flights.">
    <caption>Travel Itinerary</caption>
    <thead>
        <tr>
            <th scope="col">Flight:</th>
            <th scope="col">From:</th>
            <th scope="col">To:</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5">Total: 3 flights</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">JetBlue 983</th>
            <td>Boston (BOS)</td>
            <td>New York (JFK)</td>
        </tr>
        <tr>
            <th scope="row">JetBlue 354</th>
            <td>San Francisco (SFO)</td>
            <td>Los Angeles (LAX)</td>
        </tr>
        <tr>
            <th scope="row">JetBlue 465</th>
            <td>New York (JFK)</td>
            <td>Portland (PDX)</td>
        </tr>
    </tbody>
</table>

话虽如此，有一些努力正在处理表

于 2012-11-14T00:05:56.520 回答