带下划线的字段集图例

我正在使用一个小接口，并且目前在一个带有图例的字段集中有一组简单的单选按钮。目前，它看起来像这样：带下划线的字段集图例

但我想要得到的传说和按键之间的边界，就像这样：

的代码如下：

<fieldset> 
    <legend>Size:</legend> 
    <label> 
    <input type="radio" name="size" value="small" checked="checked" /> Small 
    </label> 
    <label> 
    <input type="radio" name="size" value="medium" /> Medium 
    </label> 
    <label> 
    <input type="radio" name="size" value="big" /> Big 
    </label> 
</fieldset>

任何意见将不胜感激！

来源

2016-01-28 Joe Balin

你试过'字段集{ \t边界：无; \t border-top：1px solid; \t }'？ –

是的，我已经尝试过 - 它所做的就是在第一张图片中留下边框的顶端！ –

我能得到的最接近的是fieldset {border = 0; border = none; \t } 传说{ \t border-bottom：2px solid; margin：inherit; }'这会使线条的长度等于图例中文字的长度 –

试试这个：

fieldset { 
    border: none; 
} 
legend { 
    border-bottom: 1px solid black; 
    padding: 2px 0px; 
    width: 100%; 
}

Demo

来源

2016-01-28 04:01:31 Ferrrmolina

美丽！正是我在找什么。谢谢！ –

带下划线的字段集图例

回答

相关问题