如何將圖例置於具有邊框的字段集中？

根據網上的幾個參考文獻，不可能定位圖例。所以建議用span來包裝它：如何將圖例置於具有邊框的字段集中？

<legend><span>Foo</span></legend>

然後我們可以把span放在fieldset裏面。但是當我想在字段集的頂部添加邊框時，圖例存在間隙。幸運的是，我發現向傳奇添加邊框還可以修復這個小小的差距，但這是非常糟糕的解決方案（與其他所有CSS一樣）。你對這個問題有更多有效的解決方案嗎？

注意：我已經開始寫這個問題後同時找到了解決方案，所以我還想問問。

來源

2011-02-01 nocss guy

讓我看看我是否得到這個權利;您想知道如何將圖例標記從原始位置移開，然後關閉頂部邊框的間隙？如果是，那麼爲什麼即使使用字段集傳說標記集？ – diceler 2011-02-01 12:53:00

+19

你會這樣做的語義和可訪問性。元素的視覺樣式與機器（例如屏幕閱讀器）如何處理它無關。 – Jared 2011-03-17 22:44:56

這很奇怪，不能改變，因爲我認爲瀏覽器中的所有默認樣式都是通過用戶代理樣式表設置的。 – 2014-04-14 13:50:38

-14

我認爲這會工作

<legend><span>ur text</span></legend>

給邊境傳說標籤

legend {padding: 2px;border: 1px solid green;}

來源

2011-02-01 09:22:16

爲什麼這是downvoted？ – 2013-07-29 14:41:32

@Craig Wayne因爲這個答案沒有解決問題？ – 2014-04-06 09:31:48

將邊距進行定位。它工作沒有問題。

legend {margin-left:50px;} /* 50px from Left of the Fieldset */

來源

2011-02-01 12:32:39 Chugworth

設置margin-top並不能很好地工作，因爲圖例仍然相對於fieldset偏移。它的對齊方式隨着圖例高度的變化而變化 – brad 2012-09-06 23:25:27

使用的大綱，而不是一個邊界：http://jsfiddle.net/leaverou/gtNnT/

來源

2011-02-01 15:04:31

如果您不關心IE 5/6/7用戶（仍然是很好的一羣人），大綱很有用。 IE 8和Firefox支持（所有當前版本）也都很不穩定。如果只有瀏覽器支持更好，這將是最好的選擇（只要你不想做圓角等任何邊界效果）！ http://reference.sitepoint.com/css/outline – Jared 2011-03-17 22:55:32

+10

我很高興地報告說，在2013年，IE5/6/7用戶不再是一大羣人。我想到這一點，它讓我深深的高興:) – 2013-06-14 13:50:45

這並沒有解決問題時，爲現場色背景 – feeela 2015-01-23 11:59:05

我知道這是一個老問題，但我得到了這個頁面，當我用Google搜索「字段集圖例位置」，我真的找不到好答案。

這個傳說只是不會表現！所以我找到的最佳解決方案是將其定位爲絕對位置，並在字段集上有一個填充頂部。 JSFildle例如：http://jsfiddle.net/carlosmartinezt/gtNnT/356/

fieldset { 
    position:relative; 
    padding-top:50px; 
} 

legend { 
    position:absolute; 
    top:20px; 
    left:18px; 
}

來源

2012-10-16 09:56:33

的OP幾乎回答了自己的問題：包裝的伎倆，但它周圍的其他方法。用途：

<span><legend>Foo</legend></span>

來源

2012-12-12 16:27:17 Marthein

-3

發現這個最穩定的，在IE7，Firefox和Chrome

fieldset legend { text-align:left; }

來源

2012-12-17 12:13:41 user1106135

-3

最後我只使用div元素測試。最後，我只需要邊框和邊框上的文字，就是這樣。

來源

2014-03-23 13:10:21

您可以對圖例使用margin-bottom「-50px」，對於fieldset可以使用padding-top「50px」，因此不要重疊。

fieldset { 
padding-top:50px; 
} 

fieldset legend { 
margin-bottom:-50px; 
}

來源

2014-05-14 13:31:05 user3515900

我發現，簡單的float:left爲LEGEND將做的工作。

Codepen樣本：http://codepen.io/vkjgr/pen/oFdBa

來源

2014-07-08 09:07:37

只要legend不是字段集的直系後裔也不會造成問題。

這將導致該問題：

<fieldset> 
    <legend>Legend</legend> 
</fieldset>

這不會

<fieldset> 
    <div> 
     <legend>Legend</legend> 
    </div> 
</fieldset>

...

如果你有，您可以使用JavaScript來包裝字段集。

$('fieldset').wrapInner("<div></div>");

來源

2014-08-01 06:40:24

-2

這似乎更直截了當。

fieldset legend { 
    position:relative; 
    left:20px; 
}

來源

2015-02-04 19:25:57 user1286322

如何將圖例置於具有邊框的字段集中？

回答

相關問題