html - CSS label 间距
问题描述
我做了一个radio select,选择器。效果图
radio中间的间距不知道是哪来的, 如果消除间距?代码如下:html
<p class='radio-toolbar'> <input type='radio' name='radios' value='all' checked> <label for='radio1'>从不</label> <input type='radio' name='radios'value='false'> <label for='radio2'>有时</label> <input type='radio' name='radios' value='true'> <label for='radio3'>经常</label></p>
css
<style>.radio-toolbar input[type='radio'] { display:none;}.radio-toolbar>label { display:inline-block; background-color:#ddd; padding:4px ; font-family:Arial; font-size:16px;}.radio-toolbar label:first-of-type{ border-radius: 12px 0 0 12px;}.radio-toolbar label:last-of-type{ border-radius: 0 12px 12px 0;}.radio-toolbar input[type='radio']:checked + label { background-color:#bbb;} </style>
已经采纳长空的答案,其余答案也是对的,最终解决方案如下
.radio-toolbar{ font-size: 0;}
问题解答
回答1:inline-block的换行符啦,我一般是设置font-size:0来解决。详细的点这
回答2:<p class='radio-toolbar'><input type='radio' name='radios' value='all' checked><label for='radio1'>从不</label><input type='radio' name='radios'value='false'><label for='radio2'>有时</label><input type='radio' name='radios' value='true'><label for='radio3'>经常</label> </p>
把代码都写在一起 不要有空格 就没有间隙了
回答3:.radio-toolbar>label 加个float: left; 父元素高度为0,你再清除浮动overflow: hidden;
相关文章:
1. golang - 用IDE看docker源码时的小问题2. macos - mac下docker如何设置代理3. debian - docker依赖的aufs-tools源码哪里可以找到啊?4. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?5. docker start -a dockername 老是卡住,什么情况?6. docker pull 错误?7. docker-compose 为何找不到配置文件?8. mac连接阿里云docker集群,已经卡了2天了,求问?9. dockerfile - 为什么docker容器启动不了?10. mac里的docker如何命令行开启呢?