发布于2022-05-23 22:43 阅读(1159) 评论(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
标记为table
and的元素row
,所以我不太确定该怎么做。我很犹豫是否推荐 a table
,特别是考虑到这一点,所以也许你应该考虑除了使用完全假的单选按钮之外,你是否可以做一些事情。
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/360633/c29aeed9538646900373/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!