带下划线的字段集图例

Posted 2023-02-16

【中文标题】带下划线的字段集图例

【英文标题】：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; ，它使行的长度等于图例中文本的长度

【参考方案1】：

试试这个：

fieldset  
  border: none;

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

Demo

【讨论】：

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