在字段集的左侧/右侧放置图例

问题描述

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

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

当给定的 HTML 片段如下所示时：

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

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

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

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

我也知道我们可以使用 fieldset 属性在 float 内放置图例文本，我们可以在 fieldset 边框 (How do I place the legend outside the fieldset border) 外放置图例

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

解决方法

似乎没有一种纯 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>