怎么样给单选按钮前面插入小图标

我们要实现下面的样式

在男和女的前面插入一个图标

思路:创建一个小小的容器，并给容器设置宽高，将图标放进去

代码实例:

css部分:

 .icon-man{width:50px;height:50px;}.icon-women{width:50px;height:50px;}

     <tr bgcolor="white"><td>性别</td><td><input type="radio" name="sex" checked="checked"><i class="icon-man"><img src="data:images/man.jpg"></i>男<input type="radio" name="sex"><i class="icon-women"><img src="data:images/women.jpg"></i>女</td></tr>

如果你想要调距离的话，就用padding属性
如下面的测试

将css设置成:

 .icon-man{width:50px;height:50px;padding-right:20px;}

其余的不变，看效果:

是不是偏离了很多

怎么样给单选按钮前面插入小图标相关推荐

html 标题栏小图标，锚点，视频插入，音乐插入
框架 iframe 里面有以下内容宽度 width="..." 高度 height="..." 显示的网页路径滚动条标题栏小图标: <link re ...
小图标文字对齐的终极解决方案
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5264 一.一切从l ...
php内li背景色,CSS_css中ul li的背景小图标属性设置的两种情况，这里我们分两种情况列出： ① - phpStudy...
css中ul li的背景小图标属性设置的两种情况这里我们分两种情况列出: ①当标题前的图标是很长的一绺而不是单独的一个点或者类似图标时,在定义背景图background要定义在里.因为很长,所以放 ...
matlab绘制布尔运算图,干货丨最全的布尔运算制作小图标教程！
昨天,一位小伙伴在后台跟小研说到了相交的问题!也有很多人跟小研反应大神们常说的布尔运算在PPT中根本找不到!今天小研就来解决你这方面的所有问题!最全的布尔运算教程!教你制作PPT中精美小图标! 我们经 ...
小图标的使用（插入icon图标）
@xudongh 2016-07-14 12:06 字数 2180 阅读 2050 在网页中插入icon图标的方法总结前端开发三种方法 CSS Sprite font + HTML font + ...
电脑重装系统后，在连接网络的小图标上出现红叉，并且只有一个飞行模式，未出现wlan的解决思路
起床看到朋友的消息,去她家拿了电脑过来,发现开机之后一直是这个死循环: 想百度看看 DBQHM是什么意思,但是没有关于这个的,不过看到DB应该是跟数据库有关的了. 重装win10后,发现还是连接不上网 ...
移动端可移动小图标（vue版）
移动端可移动小图标(vue版) 新建vue(backFirst) <template><div class="back-first-page"><di ...
将图片转换成svg文件，自定义icon小图标，svg速成
将图片转换成svg文件,自定义icon小图标,svg速成一.svg是什么? 二.操作步骤 1.进入网站 2.将svg复制 3.引用svg文件总结一.svg是什么? SVG是一种图像文件格式,它的 ...
浏览器地址栏中显示自定义小图标及什么是网站 ICO 图标？
所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不仅仅是Favicon的全部,根据浏览器的不同 ...

怎么样给单选按钮前面插入小图标

怎么样给单选按钮前面插入小图标相关推荐

最新文章

热门文章