Html 带下划线的字段集图例

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

但我想在图例和按钮之间建立一个边界，如下所示：

代码如下：

<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;
}
legend {
  border-bottom: 1px solid black;
  padding: 2px 0px;
  width: 100%;
}

---

您尝试过

字段集{border:none；border top:1px solid；}

吗？是的，我以前尝试过-它所做的只是在中的第一个图像中保留边框的顶部！我能得到的最接近的是

fieldset{border:none；}legend{border bottom:2px solid；margin:inherit；}

，它使行的长度等于legendbeautil中文本的长度！正是我想要的。谢谢