如何在字段集中对齐图例外部的文本 [英] How to align a text outside of the legend in a fieldset

问题描述

我想在图例元素之外对齐一个文本，但我不知道如何计算图例的宽度。

此示例完全按照我想要的方式工作，但它使用硬编码的顶部和左侧尺寸。一旦图例的宽度更改，此操作就会中断。有没有一个简单的方法来做到这一点？ （最新浏览器很好，不需要支持旧版本）：

 < fieldset> 
< legend style =border：3px solid red> 
图例图例图例
< span style =position：absolute; top：0; left：180px;>对齐文本< / span> 
< / legend> 
 text text text 
< / fieldset> 
  

I want to align a text outside of a legend element, but I cannot figure out a way to calculate the width of the legend.

This example works exactly as I want, but it uses a hard-coded top and left dimensions. This breaks as soon as the width of the legend changes. Is there an easy way to do this? (Latest browsers are fine. No need to support old versions):

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

解决方案

since ever form tags are difficult to style and even more if you want it cross-browsers.

when you face a legend that needs a peticular style, best is to drop the legend for a hx tag to preserve semantic as much as possible.

From then, hx tags are easy to style and your fieldset should make no fuss about it :)

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

result : http://codepen.io/anon/pen/wirLd

这篇关于如何在字段集中对齐图例外部的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！