Question

我正在处理一些代码，其中包含一个不能更改的字段集容器。出于某种原因，尽管应用了行集子元素，但我无法使其在Flexbox中显示为一行。

如何实现字段集伸缩方向行？我已经建立了一个简短的演示，展示了它在div上的工作原理，但是在css相同的情况下却不在fieldset上工作。

感谢您的帮助。

span {
  background: lightgreen;
}
span:nth-of-type(odd) {
  background: pink;
}

div, fieldset {
  display: flex;
  flex-flow: row wrap;
}

<fieldset>
  <span>text 1</span>
  <span>text 2</span>
  <span>text 3</span>
</fieldset>

<div>
  <span>text 1</span>
  <span>text 2</span>
  <span>text 3</span>
</div>

Answer 1

字段集，图例和其他一些元素不能正确使用flexbox。这是一个错误。

可能的解决方案是在HTML中使用<div role="group">，然后将CSS div[role='group']添加为选择器。

span {
  background: lightgreen;
}
span:nth-of-type(odd) {
  background: pink;
}

div, div[role='group']{
  display: flex;
  flex-flow: row wrap;
}

<div role="group">
  <span>text 1</span>
  <span>text 2</span>
  <span>text 3</span>
</div>

<div>
  <span>text 1</span>
  <span>text 2</span>
  <span>text 3</span>
</div>

字段集无法应用弯曲方向

1 个答案: