css - 我无法将我的 html 控件与 html 表中的右侧对齐

Question

我的要求是我想在表格单元格中将我的单选按钮对齐到左侧，但下面的代码没有发生这种情况：

我的代码

<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 移动数据角色，我想这不会发生。请帮我看看。

在头中添加脚本后，我也得到以下输出：

Answer 1

新的 CSS：

tr td:nth-child(1) {
   vertical-align:middle;
   text-align:right;
}

http://jsfiddle.net/yHbdn/1/

Answer 2

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 样式。在此处阅读更多相关信息。

为什么不使用样式单选按钮，如下面的演示所示。

选择