表元素重叠

时间:2012-11-13 21:51:02

标签: jquery html css jquery-ui jquery-mobile

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

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

Here is the code and image of what's going on.

1 个答案:

答案 0 :(得分: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>

现在(我认为)您正在使用表格标签来布局或显示屏幕上的元素。我建议不要这样做,因为它用于指法数据。我想这就是你要找的东西:

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中查看)

  • view-source: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>

据说,正在努力制作表格