html - 如何在 fieldset 的 Line-On-Sides 传说中？

Question

我有一个带有图例的字段集。

<fieldset>
   <legend>TEXT</legend>
</fieldset>

我正在尝试应用一种样式，我需要以下内容:

示例 1:

--------------------文本------------------------

示例 2:

文本------------------------

Ps: 线不是虚线

有没有一种简单的方法可以只用 css 来做到这一点？我找到了一些带有表格的样本...

Answer 1

这是您要找的吗？:

#sample1 {
  text-align: center;
  border: none;
  border-top: 1px solid black;
}

#sample2 {
  text-align: left;
  border: none;
  border-top: 1px solid black;
}

<fieldset id="sample1">
   <legend>Sample 1</legend>
</fieldset>

<fieldset id="sample2">
   <legend>Sample 2</legend>
</fieldset>