字段集 left/right 上的位置图例

Question

我想创建类似于以下的效果：

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

当给定一个 HTML 片段时：

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

字段集 left/right 上的位置图例

Position legend on left/right of fieldset

html

javascript

css

jquery

fieldset