Question

我有一个包含这些代码的表单：<form>, <fieldset> and <legend>。

fieldset的边框穿过图例元素的中间。我仍然希望在我的表格周围有边框，但我不想通过它的中间。问题是这样的：如果我只在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;和翻译方法的原因是将表单放在浏览器页面的中间。那么，我怎样才能摆脱通过图例中间的边框的字段集，但仍然将我的表单放在页面的中心？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

form legend{ position:relative; z-index:2 }

如何防止fieldset的边框通过form标签包围的图例元素？

2 个答案: