如何對齊字段集中圖例之外的文本

我想對齊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/

Example

來源

2014-01-07 user194076

你的意思是「外」？爲什麼要這麼做？ :) –

它很難理解你真正想要什麼。請詳細說明。 –

@ RokoC.Buljan，我想顯示如圖所示的「對齊文本」。我必須找到圖例的寬度以將對齊的文本放在旁邊。無法想象做到這一點。 – user194076

裹span圍繞「傳奇傳奇名宿」標籤的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

來源

2014-01-07 07:04:26 tewathia

最簡單的方法是將一個position:relative您legend和position:absolute分配給你的孩子span。

看到這個小提琴：http://jsfiddle.net/JS6dP/14/

記住，訣竅是使用right值只比這個span的width更高。

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

希望有所幫助。

來源

2014-01-07 07:16:51 Abhitalks

因爲任何形式標籤都很難設計風格，如果您希望跨瀏覽器的話，風格標籤會更難。

當你面對一個需要特別風格的傳說時，最好放棄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

來源

2014-01-07 16:46:20

如何對齊字段集中圖例之外的文本

回答

相關問題