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

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标签，另一个position:absolute跨度标记和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

Answer 2

最简单的方法是分配一个position:relative对于你的legend和position:absolute你的子span 。

看到这个小提琴： http ： //jsfiddle.net/JS6dP/14/

请记住 ，诀窍是使用一个恰好高于此span width的right值。

HTML：

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

CSS：

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

希望有所帮助。

Answer 3

因为表格标签很难设计，如果你想要它跨浏览器，甚至更多。

当你面对一个需要特定风格的传奇时，最好是删除hx标签的图例以尽可能地保留语义。

从那时起，hx标签很容易设计，你的字段集应该不会大惊小怪:)

<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 */
}

结果： http ： //codepen.io/anon/pen/wirLd