html - 排列单选按钮

Question

我有以下 HTML：

<tr>
    <td class=tabTwo vAlign=top>
        <table border=0 cellPadding=0 cellSpacing=0 width=100%>
            <tr>
                <td vAlign=top width=5%>4.</td>
                <td>Test 1?</td>
            </tr>
            <tr>
                <td width=5%></td>
                <td colSpan=2>a) <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
            </tr>
            <tr>
                <td width=5%></td>
                <td colSpan=2>b) <input type="radio" name="S1Q4" value="b" id="s1q4b" /> <label for="s1q4b">B</label></td>
            </tr>
            <tr>
                <td width=5%></td>
                <td colSpan=2>c) <input type="radio" name="S1Q4" value="c" id="s1q4c" /> <label for="s1q4c">C</label></td>
            </tr>
            <tr>
                <td width=5%></td>
                <td colSpan=2>d) <input type="radio" name="S1Q4" value="d" id="s1q4d" /> <label for="s1q4d">D</label></td>
            </tr>
        </table>
    </td>
</tr>

生产：

如何使单选按钮沿直线对齐？B＆C似乎歪了。

Answer 1

如果你要使用一张桌子。将输入放在他们自己的单元格中。a），b）等的字母宽度是对齐的抛出。

不过我不会使用桌子。你的选择。

Answer 2

您的问题似乎有点含糊，但据我所知，a) b) c)同一牢房中存在子弹导致了问题。这是我的小提琴：http: //jsfiddle.net/bTNvA/

我试图通过将子弹移动到其他单元格来解决这个问题：

<tr>
    <td width=5%> a) </td>
    <td colSpan=2> <input type="radio" name="S1Q4" value="a" id="s1q4a" /> <label for="s1q4a">A</label></td>
</tr>

Answer 3

HTML

<div class="form-wrapper">
    <div class="radio-choice">
        <span>a) </span>
        <input id="option1" type="radio" name="opt1"/>
        <label for="option1">Option 1</label>
    </div>

    <div class="radio-choice">    
        <span>b) </span> 
        <input id="option2" type="radio" name="opt2"/>
        <label for="option2">Option 2</label>
    </div>

    <div class="radio-choice">
        <span>c) </span> 
        <input id="option3" type="radio" name="opt3"/>
        <label for="option3">Option 3</label>
    </div>
</div>

CSS

.radio-choice * {
    vertical-align: middle;
}

.form-wrapper div{
    float: left;
    clear: both;
}

.form-wrapper span {
    display: inline-block;
    width: 10px;
}

http://jsfiddle.net/NewwV/1/