首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >单选按钮对齐样式属性

单选按钮对齐样式属性
EN

Stack Overflow用户
提问于 2009-07-28 08:36:10
回答 2查看 8.6K关注 0票数 1

我正在处理一个表单,在表格中输入了一些单选按钮,然后是一些文本区域……问题是单选按钮出现在文本区域的底部……我想把它们放在文本区域的顶部

代码语言:javascript
运行
复制
<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>

............please帮助

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2009-07-28 08:51:11

在单选按钮上使用CSS浮动:左侧:

代码语言:javascript
运行
复制
style="float:left;"

如图所示

代码语言:javascript
运行
复制
<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是一个CSS选择器,可以在Mozilla和类似工具中使用。

票数 2
EN

Stack Overflow用户

发布于 2009-07-28 09:16:13

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

我脑海中唯一的解决方案是:将单选按钮和文本区域放在一个表中,如下所示:

代码语言:javascript
运行
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1192710

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档