字段集的默認 CSS 值<legend>

Question

我正在嘗試使用<legend>作為<fieldset>內的標題。

在 IE 以外的瀏覽器中， <legend>位於<fieldset>的上邊框，文本完全居中。

我正在嘗試重置它的位置，使其與任何其他元素一樣。 即一個<h3> 。

這是我到目前為止的CSS。

fieldset legend {
    margin: 0;
    padding: 0;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;
    display: block;
    font-size: 14px;
    line-height: 18px;
}

但傳說仍然完美地集中在這條線上。

是的，我可以添加邊距/填充/頂部坐標，但我想知道瀏覽器是否有觸發此布局的元素的任何默認值。 然后我想覆蓋這些值。

在 Firefox (3.6.10)、Chrome (6.0.472.63)、Safari (5.0.2) 中測試

更新我將把這個問題留一個星期，以防有人能夠設置<legend>元素的樣式。 如果沒有找到解決方案，我會接受@jnpcl 的回答。

Answer 1

這就夠了 ：

 form legend{
    float: left;
    width: 100%;
 }

Answer 2

https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp

簡單地說，跨瀏覽器不可能將 LEGEND 元素定位在 Fieldset 中。

解決方法：將<legend>中的文本包裝在<span>中，然后重新定位<span> 。

Answer 3

我剛剛通過給他們一個位置來設置我的<legend>的樣式position: absolute; top: -25px; position: absolute; top: -25px; 和父<fieldset>的position: relative; padding-top: 30px; position: relative; padding-top: 30px;

Answer 4

根據規范， 這里是fieldset和legend元素的默認樣式。 通過重置這些屬性，您可以使用干凈的legend元素。

Answer 5

根據HTML - Living Standard ，以下樣式就像默認樣式一樣工作：

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
}

legend {
    padding-inline-start: 2px; padding-inline-end: 2px;
}

Answer 6

根據規范，如果它是float: none ，則圖例只是一個“渲染圖例”。

這意味着通過這樣做：

<fieldset>
    <legend style='float: left'> Heading </legend>
    <div class='clearfix'></div>
    <!-- Your form elements here -->
</fieldset>

這使得圖例表現得像一個普通（如果浮動）元素。

注意： clearfix是 Bootstrap clearfix 類：

.clearfix::after {
    clear: both;
}
.clearfix::before, .clearfix::after {
    display: table;
    content: " ";
}

（已經發布了類似的答案，但這不包括 clearfix 技巧，以及對規范的引用，這表明這不是隨機的，而是指定的可靠行為。）

Answer 7

這是一個非常古老的問題，但在 Google 中仍然很高，所以我想分享一個適合我的解決方案（僅針對更現代的瀏覽器以獲得最佳體驗）。

fieldset: {all:unset};
legend:{all:unset};

這對我有用，將所有值取消設置為默認值。 從那里開始，我可以愉快地在“干凈的床單”上設計風格。