Html 如何在字段集中对齐图例外的文本

我想对齐

图例

元素外部的文本，但我无法找到计算

图例

宽度的方法

这个示例完全按照我的要求工作，但它使用了硬编码的顶部和左侧维度。当

图例的宽度发生变化时，此项将立即中断。有没有一个简单的方法可以做到这一点？（最新的浏览器可以，不需要支持旧版本）：


传奇
对齐文本
文本文本文本


将
span
标记环绕在
legend
标记中的“legend”文本周围，另一个
位置：绝对
span标记和
显示：内联块
标记

<fieldset>
    <legend style="">
        <span style="border:3px solid red; display:inline-block;">Legend legend legend</span>
        <span style=" display:inline-block;"><span style="position:absolute; top:0px; padding-left:5px; ">Aligned Text</span></span>
    </legend>
    text text text
</fieldset>


传奇
对齐文本
文本文本文本

最简单的方法是为您的
图例指定
位置：相对
，为您的孩子指定
位置：绝对

看这把小提琴：

记住，诀窍是使用一个
右
值，该值刚好高于此
span
的
宽度

HTML:

希望这能有所帮助。
因为表单标记很难设置样式，如果您希望跨浏览器使用，则更难设置样式

当您面对需要叶柄样式的图例时，最好是删除hx标记的图例，以尽可能保留语义

从那时起，hx标签很容易设计，您的字段集应该不会对此大惊小怪：）

结果：
你说的“外面”是什么意思？你为什么要这样做？：）很难理解你真正想要什么。请详细说明。@RokoC.Buljan，我想显示图片中的“对齐文本”。我必须找到图例的宽度，以便将对齐的文本放置在它旁边。我想不出怎么做。跨距的宽度会随着放置在跨距内的字符数的变化而变化，也就是说，“单词”的宽度与“单词”的宽度不同。我一直在尝试解决这个问题，并取得了一定的成功。看见如果使用开发人员工具从“图例”
span
中删除
float:left
，您将获得所需的效果。但是，如果您没有
float:left
开始时的跨度，则它不起作用（请参阅）。我不明白为什么会这样。
<fieldset>
    <legend style="">
        <span style="border:3px solid red; display:inline-block;">Legend legend legend</span>
        <span style=" display:inline-block;"><span style="position:absolute; top:0px; padding-left:5px; ">Aligned Text</span></span>
    </legend>
    text text text
</fieldset>

<fieldset>
    <legend style="border:3px solid red">
        Legend legend legend legend
        <span class="legendText">Aligned Text</span>
    </legend>
    text text text
</fieldset>

legend { position: relative; }
.legendText { 
    display: inline-block;
    position: absolute;
    width: 92px;
    top: -16px;
    right: -96px;
}

<fieldset>
    <h1 class="legend">
        Legend legend legend
        <span>Aligned Text</span>
    </h1>
    text text text
</fieldset>

fieldset {
  margin-top:1.25em;/* if no legend, increase margin-top*/
}
h1.legend {
  font-size:1em;
  display:table;/* to shrink on its content */
  margin-top:-1em;/* go up where legend stands usally */
  background:white;/* hide fieldset beneath */
  border:solid red;
}
.legend span {
  position:absolute;
  margin:-0.7em 0 0 0.5em;/* climb a little more */
  /* no coordonates needed, it shows where it is suppose too */
}