javascript - 使用 jQuery Mobile 的一个标签和三个输入

Question

我想知道是否可以像下面的原型一样使用 jQuerymobile 制作表格线。

我尝试使用具有四列的布局网格，例如下面的一列，但是生日标签比第二列大并增加了它的大小。

<div class="ui-block-a">
    <label for="idnumber" style="width:50%">
        ID:
    </label>
    <input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text">
</div>
<div class="ui-block-b">
    <label for="month" style="width:10%">
        Birthday:
    </label>
    <input name="month" id="month" placeholder="MM" value="" type="text">
</div>
<div class="ui-block-c" style="width:10%">
    <label for="day">
        &nbsp;
    </label>
    <input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:30%">
    <label for="year">
        &nbsp;
    </label>
    <input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>

Answer 1

几分钟后，我发布了这个问题，我意识到问题出在哪里。我错误地将style="width:XX%"标签放在前两个字段的内部，而不是将它们放在块 div 中。

正确的代码如下：

<div class="ui-block-a" style="width:40%; margin-right: 10px;">
    <label for="idnumber">
        ID:
    </label>
    <input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text">
</div>
<div class="ui-block-b" style="width:15%; margin-right: 5px;">
    <label for="month">
        Birthday:
    </label>
    <input name="month" id="month" placeholder="MM" value="" type="text">
</div>
<div class="ui-block-c" style="width:15%; margin-right: 5px;">
    <label for="day">
        &nbsp;
    </label>
    <input name="day" id="day" placeholder="DD" value="" type="text">
</div>
<div class="ui-block-d" style="width:20%">
    <label for="year">
        &nbsp;
    </label>
    <input name="year" id="year" placeholder="YYYY" value="" type="text">
</div>

正确的结果如下：

Answer 2

试试这个：

<div data-role="content" class="ui-grid-a"> 
    <div class="ui-block-a">
        <label for="idnumber">
           ID:
        </label>
        <input name="idnumber" id="idnumber" placeholder="(ID Number)" value="" type="text" style="width:90%">
    </div>
    <div class="ui-block-b ui-grid-b">
        <div class="ui-block-a" style="width:20%">
            <label for="month">
            Birthday:
            </label>
            <input name="month" id="month" placeholder="MM" value="" type="text" style="width:90%">
        </div>
        <div class="ui-block-b" style="width:20%">
            <label for="day">
            &nbsp;
            </label>
            <input name="day" id="day" placeholder="DD" value="" type="text" style="width:90%">
        </div>
        <div class="ui-block-c" style="width:60%">
            <label for="year">
            &nbsp;
            </label>
            <input name="year" id="year" placeholder="YYYY" value="" type="text">
        </div>     
    </div>
</div>

我认为这更简单。我在第二个中使用 2 个网格和 3 个网格。