Question

<table>
                <tr style="background:#CCCCCC">
                    <td>
                        <input id="Radio1" name="G1M" value="1" type="radio" /><br />
                        <input id="Radio2" name="G1M" value="2" type="radio" /><br />
                        <input id="Radio3" name="G1M" value="3" type="radio" /><br />
                        <input id="Radio4" name="G1M" value="4" type="radio" />
                    </td>
                    <td>
                        <input id="Radio5" name="G1L" value="1" type="radio" />Gentle or kindly<br />
                        <input id="Radio6" name="G1L" value="2" type="radio" />Persuasive, convincing<br />
                        <input id="Radio7" name="G1L" value="3" type="radio" />Humble, reserved, modest<br />
                        <input id="Radio8" name="G1L" value="4" type="radio" />Original, inventive, individualistic
                    </td>
                </tr>
</table>

在页面中，两组单选按钮相互显示，每列高1列，深4行。但是，由于第二组后面有文本，因此单选按钮之间的分布比第一组按钮之间的分布宽。我不想在第一组之后添加文本，我尝试使用空格。是否有更好的方法来格式化这两个并排的单选按钮组？

Answer 1

也许您应该在表中使用更多列，以及更多行。你应该使用别的东西（比如CSS），但不要让我开始。

<table>
    <tr>
        <td><input id="Radio1" name="G1M" value="1" type="radio" /></td>
        <td><input id="Radio5" name="G1L" value="1" type="radio" /></td>
        <td>Gentle or kindly</td>
    </tr>
    <tr>
        <td><input id="Radio2" name="G1M" value="2" type="radio" /></td>
        <td><input id="Radio6" name="G1L" value="2" type="radio" /></td>
        <td>Persuasive, convincing</td>
    </tr>
    <tr>
        <td><input id="Radio3" name="G1M" value="3" type="radio" /></td>
        <td><input id="Radio7" name="G1L" value="3" type="radio" /></td>
        <td>Humble, reserved, modest</td>
    </tr>
    <tr>
        <td><input id="Radio4" name="G1M" value="4" type="radio" /></td>
        <td><input id="Radio8" name="G1L" value="4" type="radio" /></td>
        <td>Original, inventive, individualistic</td>
    </tr>
</table>

此<table>每个选项都有一行，每个单选按钮有一个<td>，文本有一个<td>。

您也可以使用CSS和<div>代替。

<style>
input[type='radio'].spaceRight {
    margin-right: 10px;
}
</style>

<!-- do this for each row -->
<div>
    <input class="spaceRight" id="Radio1" name="G1M" value="1" type="radio" />
    <input class="spaceRight" id="Radio2" name="G1M" value="2" type="radio" />
    Gentle or kindly
</div>

Answer 2

将它们放在单独的<tr> s。

中

Answer 3

<table>
            <tbody><tr style="background: none repeat scroll 0% 0% rgb(204, 204, 204);">
                <td>
                    <input type="radio" id="Radio1" name="G1M" value="1">&nbsp;<br>
                    <input type="radio" id="Radio2" name="G1M" value="2">&nbsp;<br>
                    <input type="radio" id="Radio3" name="G1M" value="3">&nbsp;<br>
                    <input type="radio" id="Radio4" name="G1M" value="4">&nbsp;
                </td>
                <td>
                    <input type="radio" value="1" name="G1L" id="Radio5">Gentle or kindly<br>
                    <input type="radio" value="2" name="G1L" id="Radio6">Persuasive, convincing<br>
                    <input type="radio" value="3" name="G1L" id="Radio7">Humble, reserved, modest<br>
                    <input type="radio" value="4" name="G1L" id="Radio8">Original, inventive, individualistic
                </td>
            </tr>

Answer 4

设置第一个<td>的宽度。如果您的第二个<td>宽度小于单选按钮后的实际文本宽度，则将它们放在单独的<tr>中是您需要执行的操作。但我喜欢@zneak所说的，你可能只是让某人开始说这为什么你不应该使用表格？：）

单选按钮未正确对齐

4 个答案: