时间戳

首页 > 解决方案 > 字段集无法应用弹性方向

html - 字段集无法应用弹性方向

问题描述

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

fieldset flex direction row如何实现？我已经构建了一个简短的演示，展示了它在 div 上而不是在字段集上工作，尽管具有相同的 css。

感谢您在这里的任何帮助。

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>

标签： htmlcssflexbox

解决方案

Fieldset、legends 等一些元素不能flexbox正常使用。它是一个错误。

一个可能的解决方案可以<div role="group">在 HTML 中使用，并添加 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>

推荐阅读