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>

可生产：

enter image description here

如何使单选按钮对齐？ B＆amp; 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/

排队单选按钮

3 个答案: