防止fieldset元素的邊框通過圖例元素

Question

我有一個字段集，如何將圖例放在帶邊框的字段集中？ 我希望邊界繞過傳說，而不是通過它的中間。

的jsfiddle

 fieldset { border: 0; padding: 0!important; margin: 0; min-width: 0; border: 1px solid red; } legend { padding: 0!important; } 

 <fieldset> <legend>Title</legend> </fieldset> 

Answer 1

一種選擇是將legend元素浮動到左側：

 fieldset { border: 2px solid #f00; } legend { float: left; width: 100%; padding: 0; font-weight: bold; } 

 <fieldset> <legend>This is a legend</legend> <label>Here is an input element: <input type="text" /></label> </fieldset> 

---

另一種方法是使用outline而不是border ：

 fieldset { border: none; outline: 2px solid #f00; } legend { padding: 0.6em 0 0; font-weight: bold; } 

 <fieldset> <legend>This is a legend</legend> <label>Here is an input element: <input type="text" /></label> </fieldset> 

---

另一種方法是將legend元素相對於父fieldset元素絕對定位。 這可能是最不靈活的方法。

 fieldset { border: 2px solid #f00; position: relative; padding-top: 2.6em; /* Displace the absolutely positioned legend */ } legend { position: absolute; top: 0; left: 0; padding: 12px; font-weight: bold; } 

 <fieldset> <legend>This is a legend</legend> <label>Here is an input element: <input type="text" /></label> </fieldset> 

Answer 2

接受答案的變體（使用SASS）應該適用於所有現代瀏覽器（IE9 +）

fieldset {
  > legend {
    float: left;

    + * {
      clear: both;
    }
  }
}

這將清除浮動后的下一個元素，因此您不必擔心布局混亂。