如何在Mozilla Firefox中将HTML `legend`元素样式化为表格单元格？

Question

如何在Mozilla Firefox中将HTML `legend`元素样式化为表格单元格？

5

如何在Mozilla Firefox中将HTML legend元素样式化为表格单元格？（我无法在任何浏览器中实现此操作，但我仅需要Firefox的功能。）

我需要此功能来对齐多个fieldset元素中的多个legend元素，就像它们分别是th和tr元素一样。

以下代码是示例，其中第二个到第六个div元素演示了我似乎无法使用legend和fieldset实现所需布局的情况。 legend元素之后有一个不必要的换行符，我似乎无法去除，根据display:table-cell样式，它不应该存在。

* {
  all: unset;
}

 ::before,
 ::after {
  all: unset;
}

html {
  margin: 3rem;
}

style {
  display: none;
}

h1 {
  display: block;
  font-weight: bolder;
  margin-bottom: 0.25rem;
}

body > div {
  display: table;
}

fieldset,
body > div > div {
  display: table-row;
  margin-bottom: 1rem;
  outline: 1px solid blue;
}

legend,
span,
div > div > div {
  display: table-cell;
  outline: 1px solid red;
}

input {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

<h1>bad: tabular <code>fieldset</code> and <code>legend</code></h1>
<div>
  <fieldset>
    <legend><label for="checkbox.1">Label for Checkbox</label></legend>
    <span><input id="checkbox.1" type="checkbox"></span>
  </fieldset>
  <fieldset>
    <legend><label for="checkbox.2">Label for Checkbox; Checkboxes Should Line Up</label></legend>
    <span><input id="checkbox.2" type="checkbox"></span>
  </fieldset>
</div>
<h1>good: tabular <code>div</code> and <code>div</code></h1>
<div>
  <div>
    <div><label for="checkbox.3">Label for Checkbox</label></div>
    <span><input id="checkbox.3" type="checkbox"></span>
  </div>
  <div>
    <div><label for="checkbox.3">Label for Checkbox; Checkboxes Should Line Up</label></div>
    <span><input id="checkbox.3" type="checkbox"></span>
  </div>
</div>

- Patrick Dark

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ricky Dam · Answer 1

在HTML的legend标签中添加float: left;。

* {
  all: unset;
}
html {
  margin: 3rem;
}
style {
  display: none;
}
h1 {
  display: block;
  font-weight: bolder;
  margin-bottom: 0.25rem;
}
fieldset,
body > div {
  display: table-row;
  margin-bottom: 1rem;
  outline: 1px solid blue;
}
legend,
span,
div > div {
  display: table-cell;
  outline: 1px solid red;
}
legend {
  float: left;
}
input {
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

<h1>bad: tabular <code>fieldset</code> and <code>legend</code></h1>
<fieldset>
  <legend><label for="checkbox.1">Label for Checkbox</label></legend><span><input id="checkbox.1" type="checkbox"></span>
</fieldset>
<h1>good: tabular <code>div</code> and <code>div</code></h1>
<div>
  <div><label for="checkbox.2">Label for Checkbox</label></div>
  <span><input id="checkbox.2" type="checkbox"></span>
</div>