0

まとめようとしているアプリの簡単なプロフィール ページを作成しようとしています。

4 つの質問があり、最後の質問は ですGender。

他の 3 つの質問は「フィールド コンテナーのテキスト入力」でうまくいきましたが、性別の質問にはラジオ ボタンを使用したかったのです。

Male/Femaleボタンをタイトルに合わせようとすると、ボタンGenderが常に近すぎて、タイトルとインライン化されません。

私が達成しようとしているのは、ボタンをGender他の 3 つのセクションと同じ距離でインライン化することです。

これが私がこれまでに持っているものです：

<div data-role="content">
    <div data-role="fieldcontain">
       <label for="height" style="font-size:25px"><strong>Height</strong></label>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px; margin-right:10px"> feet   </p>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px; margin-right:10px"> inches OR   </p>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px"> cm</p>
    </div>
    <div data-role="fieldcontain">
       <label for="height" style="font-size:25px"><strong>Height</strong></label>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px; margin-right:10px"> pounds OR   </p>
       <input style="display: inline-block;  width: 5%" type="text" name="name" id="height" value="" />
       <p style="display: inline-block; margin-left:5px"> kg</p>
    </div>
    <div data-role="fieldcontain">
       <label for="age" style="font-size:25px"><strong>Age</strong></label>
       <input style="width: 5%" type="text" name="name" id="age" value="" />
    </div>
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
       <div style="display:inline !important;">
          <label style="font-size:25px"><strong>Gender</strong></label>
       </div>
       <div style="display:inline-block !important; float:right !important;">
          <input type="radio" name="radio-choice" id="male" value="choice-1" />
          <label for="male">Male</label>
          <input type="radio" name="radio-choice" id="female" value="choice-2" />
          <label for="female">Female</label>
       </div>
    </fieldset>
</div>
4

1 に答える 1

0

性別フィールドグループのマークアップを次のように変更します。

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <legend><strong style="font-size:25px">Gender</strong></legend>
        <input type="radio" name="radio-choice" id="male" value="choice-1" checked="checked" />
        <label for="male">Male</label>
        <input type="radio" name="radio-choice" id="female" value="choice-2" />
        <label for="female">Female</label>
    </fieldset>
</div>
于 2013-01-11T03:47:20.237 に答える