html - CSS label 间距

问题描述

问 题

我做了一个radio select,选择器。效果图

radio中间的间距不知道是哪来的， 如果消除间距?
代码如下：
html

<div class="radio-toolbar">
    <input type="radio" id="radio1" name="radios" value="all" checked>
    <label for="radio1">从不</label>

    <input type="radio" id="radio2" name="radios"value="false">
    <label for="radio2">有时</label>

    <input type="radio" id="radio3" name="radios" value="true">
    <label for="radio3">经常</label>
</div>

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;
}

解决方案

inline-block的换行符啦，我一般是设置font-size:0来解决。
详细的点这

这篇关于html - CSS label 间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！