為什么<legend>的行為與不同？

考慮這個簡單的例子，我們希望<legend>并排布局 a 及其關聯的輸入內容，沒有邊框，而不是使用默認<fieldset>顯示。首先，按預期作業的標記：

fieldset {
  border: 0;
  display: flex;
}

<form>
  <fieldset>
    <div>
      <legend>Choose your favorite monster</legend>
    </div> 

    <div>
      <input type="radio" id="kraken" name="monster">
      <label for="kraken">Kraken</label><br />

      <input type="radio" id="sasquatch" name="monster">
      <label for="sasquatch">Sasquatch</label><br />
    </div>
  </fieldset>

</form>

現在我們想，“這不是多余<div>的嗎？” <legend>也就是說，我們不能簡單地洗掉它，將其更改<legend>為display:block并期望相同的行為嗎？

事實證明我們不能：

fieldset {
  border: 0;
  display: flex;
}

legend {
  display: block;
}

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <div>
      <input type="radio" id="kraken" name="monster">
      <label for="kraken">Kraken</label><br />

      <input type="radio" id="sasquatch" name="monster">
      <label for="sasquatch">Sasquatch</label><br />
    </div>
  </fieldset>

</form>

它現在從上到下顯示，而不是并排顯示？但為什么？有沒有辦法讓它并排顯示而沒有多余<div>的<legend>？

編輯：

請注意：我正在尋找一種解決方案，允許我使用 flexbox 布局兩個元素（“圖例”和“輸入內容”）。特別是，浮動<legend>不是我的用例的有效解決方案。

uj5u.com熱心網友回復：

將圖例設定為float:left。

fieldset 的規則有點“神奇”，但在HTML5 渲染部分中進行了描述。

如果 [fieldset] 元素的框有一個與下面串列中的條件匹配的子框，那么第一個這樣的子框就是 'fieldset' 元素的渲染圖例：

• 孩子是一個傳奇元素。
• 孩子使用的“float”值為“none”。
• 孩子使用的“位置”值不是“絕對”或“固定”。

position:absolute并position:fixed導致其他問題。但是浮動是完美的，因為它是一個彈性專案，它實際上不會像浮動一樣，而是作為一個常規彈性專案。我已經添加justify-content:space-around以證明這實際上正在發生。

fieldset {
  border: 0;
  display: flex;
  justify-content:space-around;
}

legend {
  display: block;
  float:left;
}

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <div>
      <input type="radio" id="kraken" name="monster">
      <label for="kraken">Kraken</label><br />

      <input type="radio" id="sasquatch" name="monster">
      <label for="sasquatch">Sasquatch</label><br />
    </div>
  </fieldset>

</form>

uj5u.com熱心網友回復：

方法1（floating <legend>黑客）

正如@Alohci 發現的那樣，在使用時<legend>，float: left黑客（仍然）是不可避免的。

請參閱@BorisZbarsky 從2011 年的這個答案，十多年前，早在CSS Flexbox正確建立之前：

傳說很特別。特別是，它們的默認渲染無法用 CSS 描述，因此瀏覽器使用非 CSS 方式來渲染它們。這意味著靜態定位的圖例將被視為圖例，并與欄位集的實際內容分開。

來源： 為什么我的 <legend> 元素不能行內顯示？

由于float: left無法避免宣告，因此我想出的最簡潔的 CSS 是：

fieldset {
  display: flex;
  border: none;
}

legend {
  float: left; /* Hack to prevent browsers applying special <legend> styling */
}

作業示例：

fieldset {
  display: flex;
  border: none;
}

legend {
  float: left; /* Hack to prevent browsers applying special <legend> styling */
}

legend::after {
  content: ':';
}

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <div>
      <input type="radio" id="kraken" name="monster">
      <label for="kraken">Kraken</label><br />

      <input type="radio" id="sasquatch" name="monster">
      <label for="sasquatch">Sasquatch</label><br />
    </div>
  </fieldset>

</form>

延伸閱讀：

這位技術博主遇到了同樣的問題。很長一段時間以來，似乎獨特的定位行為<legend>一直是一個問題：

• https://morgan.cugerone.com/blog/how-to-make-a-fieldset-legend-inline/

方法 2（ARIA 替代方案）

該<legend>元素具有無可爭議的語意價值，但我們可以部署：

• aria-labelledby; 或者
• aria-describedby

在另一個元素（例如<div>）中復制 的語意值<legend>。

如果我們換掉并支持<legend>ARIA ，我們可以在不丟失語意的情況下獲得風格。<div id="my-legend">

作業示例：

fieldset {
  display: flex;
  border: none;
}

fieldset div:first-of-type::after {
  content: ':';
}

<form>
  <fieldset aria-describedby="my-legend">
    <div id="my-legend">Choose your favorite monster</div>

    <div>
      <input type="radio" id="kraken" name="monster">
      <label for="kraken">Kraken</label><br />

      <input type="radio" id="sasquatch" name="monster">
      <label for="sasquatch">Sasquatch</label><br />
    </div>
  </fieldset>
</form>

uj5u.com熱心網友回復：

display: contents可能是這里最好的候選者，因為它將洗掉標簽以僅保留其內容，因此<legend>標簽的行為不再有問題。然后 flexbox 演算法將自動將文本作為匿名 flex 項，因此您的圖例是 flex 項。

元素本身不會生成任何 box，但其子元素和偽元素仍會生成 box 并且文本會正常運行。出于框生成和布局的目的，必須將元素視為已在元素樹中被其內容 ^ref替換

fieldset {
  border: 0;
  display: flex;
}

legend {
  display: contents;
}

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <div>
      <input type="radio" id="kraken" name="monster">
      <label for="kraken">Kraken</label><br />

      <input type="radio" id="sasquatch" name="monster">
      <label for="sasquatch">Sasquatch</label><br />
    </div>
  </fieldset>

</form>

標籤：html css

上一篇：HTML背景圖片插入

下一篇：影像樣式的CSS和HTML問題