字段集左侧/右侧的位置图例 [关闭]

Question

我想创建一个类似于以下内容的效果：

____________________
|                  |
h                  |
e                  |
l                  |
l                  |
o                  |
|__________________|

当给定一个看起来像这样的 HTML sn-p 时：

<fieldset>
    <legend> Hello </legend>
</fieldset>

我知道我们可以创建如下所示的效果：

_________hello______
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|__________________|

并且可以使用text-align 属性将hello文本重新对齐到左侧、右侧或中心。

我还知道我们可以通过使用float 属性将图例文本放置在fieldset 内，并且我们可以将图例放置在fieldset 边框之外（How do I place the legend outside the fieldset border）

但似乎没有支持/快速方法将图例文本沿 fieldset 边界放置。 我遇到了图例的 align 属性，但它不适用于 HTML5 (https://html.com/attributes/legend-align/)。

Answer 1

似乎没有一种纯 HTML 的方式来做到这一点。同时，试试这个绝对定位解决方案：

legend {
    position: absolute;
    top: 4px;
    left: -7px;
    width: 1ch;
    word-break: break-all;
    background-color: white;
}
fieldset{
  position:relative;
}

<fieldset>
  <legend> Hello </legend>
  <h1>Hello</h1>
</fieldset>