带下划线的字段集图例

Question

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

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

代码如下：

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

如有任何建议，我们将不胜感激！

Answer 1

试试这个：

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

Demo

带下划线的字段集图例

Underlined Fieldset Legend

html

css

border

fieldset

legend