html - 如何对齐字段集中图例之外的文本

Question

我想对齐 legend 元素之外的文本，但我想不出一种方法来计算 legend 的宽度。

此示例完全符合我的要求，但它使用了硬编码的顶部和左侧尺寸。一旦 legend 的宽度改变，这就会中断。是否有捷径可寻？ (最新的浏览器都可以，不需要支持旧版本):

<fieldset>
    <legend style="border:3px solid red">
        Legend legend legend
        <span style="position:absolute; top:0; left:180px;">Aligned Text</span>
    </legend>
    text text text
</fieldset>

http://jsfiddle.net/JS6dP/

Answer 1

将 span 标签包裹在 legend 标签中的 'legend legend legend' 文本周围，另一个 position:absolute span 标签和 display:inline-block 它们。

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

DEMO