广告区

广告区


本站消息

站长简介/公众号


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

无法在单行中制作单选按钮

发布于2022-05-23 22:43     阅读(767)     评论(0)     点赞(2)     收藏(0)




我有以下用于单选按钮的 html,并且我还添加了 css

   <br/><br/>
                <input type="radio" id="radio1" name="radios" value="CC" checked>
   <label for="radio1">Credit Card</label>
                    <br><br>
                        <br/><br/>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
    <br><br>

它的CSS是

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

但单选按钮没有对齐在一行

这是 jsfiddle http://jsfiddle.net/8ew6g/3/

这是链接http://jsfiddle.net/8ew6g/9/ [已解决]

单选按钮在支付模式标签下方,我在上面应用了一些 CSS,所以它看起来不像基本的单选按钮


解决方案


更新这个资源也可能有用,因为它使用类似的代码并且结果是内联的。

我建议您遵循此建议,然后将您的代码与标题一起包装在fieldset. 这将允许您制作图例,因此您的代码将如下所示:

<fieldset>
    <legend><strong>Payment Mode- Select your payment mode</strong></legend>
    <input type="radio" id="radio1" name="radios" value="all" checked>
    <label for="radio1">Credit Card</label>
    <input type="radio" id="radio2" name="radios" value="false">
    <label for="radio2">Debit Card</label>
</fieldset>

您还需要将其添加到您的 CSS 中:

fieldset {
    border: none;
}

你可以试试这个:

<table>
    <tr>
        <td>
            <input type="radio" id="radio1" name="radios" value="CC" checked />
            <label for="radio1">Credit<nobr/> Card</label>
        </td>
        <td>
            <input type="radio" id="radio2" name="radios" value="DB">
            <label for="radio2">Debit<nobr/> Card</label>
        </td>
    </tr>
</table>

为了确保这两个词之间的线不会中断,当我在你的 Fiddle 上尝试它时发生了这种情况。

您的 HTML 相当混乱,特别是考虑到div标记为tableand的元素row,所以我不太确定该怎么做。我很犹豫是否推荐 a table,特别是考虑到这一点,所以也许你应该考虑除了使用完全假的单选按钮之外,你是否可以做一些事情。


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)
关注公众号:程序员总部,回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分






所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/360633/c29aeed9538646900373/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

2 0
收藏该文
已收藏

评论内容:(最多支持255个字符)