Question

我正在使用一个表格，并在表格中放置一些单选按钮，然后是一些textareas ....问题是单选按钮出现在textarea的底部....我想将它们放在顶部textarea

<table align='center' valign='top' border='1'><tr><th align='center' >  qno)1</th></tr><tr><td><textarea rows='5' cols='50' readonly>question</textarea></td></tr>
    <tr valign='top'><td><input type='radio' name='opt' value='A' checked='checked' /><textarea rows='1' cols='70' wrap='off' readonly>option d</textarea></td></tr>
    <tr><td><input type='radio' name='opt' value='B' /><textarea rows='1' cols='70' wrap='off' readonly>option a</textarea></td></tr>
    <tr><td><input type='radio' name='opt' value='C' /><textarea rows='1' cols='70' wrap='off' readonly>option b</textarea></td></tr>
    <tr><td><input type='radio' name='opt' value='D' /><textarea rows='1' cols='70' wrap='off' readonly>option c</textarea></td></tr></table>

............请帮忙

Answer 1

在单选按钮上使用CSS float：left：

style="float:left;"

，如

<style>
    input [type="radio"],.NiceRadio {float:left;}
</style>
<table align='center' valign='top' border='1'>
    <tr>
        <th align='center' >  qno)1</th>
    </tr>
    <tr>
        <td><textarea rows='5' cols='50' readonly>question</textarea></td>
    </tr>
    <tr valign='top'>
        <td><input type='radio' class="niceRadio" name='opt' value='A' checked='checked' /><textarea rows='1' cols='70' wrap='off' readonly>option d</textarea></td>
    </tr>
    <tr>
        <td><input type='radio' class="niceRadio" name='opt' value='B' /><textarea rows='1' cols='70' wrap='off' readonly>option a</textarea></td>
    </tr>
    <tr>
        <td><input type='radio' class="niceRadio" name='opt' value='C' /><textarea rows='1' cols='70' wrap='off' readonly>option b</textarea></td>
    </tr>
    <tr>
        <td><input type='radio' class="niceRadio" name='opt' value='D' /><textarea rows='1' cols='70' wrap='off' readonly>option c</textarea></td>
    </tr>
</table>

顶部的CSS仅供参考。它将float：left分配给所有单选按钮。 Input [type = radio]是一个可以在Mozilla中使用的CSS选择器。

Answer 2

HTML和CSS中的垂直对齐完全搞砸了。这里描述的一些问题：Understanding vertical-align。

我想到的唯一解决方案是：将单选按钮和textarea放在这样的表中：

<table align='center' valign='top' border='1'>
    <tr>
        ...
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td style="vertical-align: top;">
                        <input type='radio' name='opt' value='B' /></td>
                    <td>
                        <textarea rows='1' cols='70'>option a</textarea></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        ...
    </tr>
</table>

单选按钮对齐样式属性

2 个答案: