3

以下のプロトタイプのように、jQuerymobile でフォーム ラインを作成できるかどうかを知りたいです。

ここに画像の説明を入力

以下のような 4 列のレイアウト グリッドを使用しようとしましたが、Birthday ラベルが 2 番目の列よりも大きく、サイズが大きくなります。

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

ここに画像の説明を入力

4

2 に答える 2

2

数分後、質問を投稿したところ、何が問題なのかがわかりました。誤っstyle="width:XX%"て、最初の 2 つのフィールドのラベルをブロック 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>

そして、正しい結果は次のとおりです。

ここに画像の説明を入力

于 2013-01-07T18:41:40.453 に答える
1

これを試して：

<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 グリッドを 2 番目に使用しています。

于 2013-01-07T18:57:40.100 に答える