css - 如何防止字段集的边界穿过由form标签包围的图例元素？

我有一个带有这些标签的表单：<form>, <fieldset> and <legend>。

字段集的边界穿过图例元素的中间。我仍然希望在表单周围有边框，但是我不想通过表单的中间。
问题是这样的：如果仅在CSS中尝试使用字段集和图例，则一切正常，但是如果我还添加了表单样式，则会出现我在说的错误。

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-height: 50px;
  padding: 5px;
  margin: 10px;
  clear: both;
  float: left;
  width: 40%;
  text-align: left;
  border: 0px;
}
fieldset {
  padding: 10px;
  margin: 2px;
  border: 1px solid #000000;
  width: 60%;
}
legend {
  padding: 0px;
  border: 0px;
  color: #ff0000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
}

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

我猜这是表单和字段集/图例样式之间的冲突。我添加position: absolute;和translate方法的原因是将表单放置在浏览器页面的中间。
因此，如何摆脱穿过图例中间的边框的字段集，但仍将表单放置在页面中心？

最佳答案

如果希望图例显示在字段集边界之外，则必须将其放置在fieldset元素之前，而不是在其中。但是，这不是valid HTML，因此请您自担风险。

form {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-height: 50px;
  padding: 5px;
  margin: 10px;
  clear: both;
  float: left;
  width: 40%;
  text-align: left;
  border: 0px;
}
fieldset {
  padding: 10px;
  margin: 2px;
  border: 1px solid #000000;
  width: 60%;
}
legend {
  padding: 0px;
  border: 0px;
  color: #ff0000;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
}

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

关于css - 如何防止字段集的边界穿过由form标签包围的图例元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33348370/