带下划线的字段集图例答案

【问题标题】：Underlined Fieldset Legend带下划线的字段集图例
【发布时间】：2016-05-05 05:19:39
【问题描述】：

我正在开发一个小型界面，目前在带有图例的字段集中有一组简单的单选按钮。目前看起来是这样的：

但我想在图例和按钮之间设置边框，如下所示：

代码如下：

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

任何建议将不胜感激！

【问题讨论】：

你试过fieldset{ border:none; border-top: 1px solid; }吗？
是的，我之前尝试过 - 它所做的只是将边框的顶部留在第一张图片中！
我能得到的最接近的是fieldset{ border:none; } legend{ border-bottom: 2px solid; margin: inherit; }，它使行的长度等于图例中文本的长度

标签： html css border legend fieldset

【解决方案1】：

试试这个：

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

Demo

【讨论】：

漂亮！正是我想要的。谢谢！