防止fieldset元素的边框穿过legend元素

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

元素 relative 绝对定位到父

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

这将清除浮动后的下一个元素，因此您不必担心布局被搞乱。

Answer 3

将图例设置为

display: contents;

应该可以完成您想要的操作，例如

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

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