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

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个标记。{/ p>

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

请记住，诀窍是使用right值，该值仅高于此width的{​​{1}}。

HTML：

span

CSS：

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

希望有所帮助。

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