一个标签，带有三个带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格。