-1

私の要件は、ラジオボタンをテーブルセルの左に揃えたいということですが、以下のコードでは起こりません:

私のコード

<div data-role="collapsible" data-theme="b" data-content-theme="b">
    <h3>Action</h3>
    <table class="tabledata" width="100%">
        <tr>
            <td class="td1">
                <p>
                    <input id="Radio1" type="radio" value="Approve" /></p>
            </td>
            <td class="td2">Approve</td>
        </tr>
        <tr>
            <td>
                <input id="Radio2" type="radio" /></td>
            <td class="td2">Reject</td>
        </tr>
        <tr>
            <td>
                <input id="Radio3" type="radio" />
            </td>
            <td class="td2">Send Back to Requestor</td>
        </tr>
        <tr>
            <td>Amount Approved for Domestic sector : </td>
            <td>
                <input id="Text1" type="text" /></td>
        </tr>
        <tr>
            <td>Remarks : </td>
            <td>
                <input id="Text2" type="text" /></td>
        </tr>
        <tr>
            <td class="tabledata">
                <input id="Button1" type="button" value="Submit" />
            </td>
        </tr>
    </table>
</div>

私のCSSクラス:

.td1 {
    vertical-align:middle;
    text-align:right;
}

.td2 {
    text-align: left;
}

実際には、2つの列を組み合わせて中央揃えにすることで、ラジオボタンとそれに対応するテキストを表の行に保持し、jqueryモバイルデータロールを使用しているため、送信ボタンを表の行に中央揃えにする必要があります。見るのを手伝ってください。

頭にスクリプトを追加した後も、以下の出力が得られます。

ここに画像の説明を入力

4

2 に答える 2

0

ui-radio各ラジオ ボタンからクラスを削除します。

$('[type=radio]').each(function () {
 $(this).closest('div').removeClass('ui-radio');
});

td1各ラジオボタンにクラスを追加します。

<tr>
 <td class="td1">
  <input id="Radio1" type="radio" value="Approve" />
 </td>
 <td class="td2">Approve</td>
</tr>
<tr>
 <td class="td1">
  <input id="Radio2" type="radio" />
 </td>
 <td class="td2">Reject</td>
</tr>
<tr>
 <td class="td1">
  <input id="Radio3" type="radio" />
 </td>
 <td class="td2">Send Back to Requestor</td>
</tr>

デモ

別の方法: jQuery コードもカスタム CSS スタイルも必要ありません。詳しくはこちらをご覧ください。

以下のデモのように、スタイル付きのラジオ ボタンを使用しないでください。

別

于 2013-04-19T09:28:44.663 に答える