如何将字段集设置为 flex 以使图例位于内容的左侧？

【问题标题】：How can a fieldset be set to flex so that the legend is on the left of the content?如何将字段集设置为 flex 以使图例位于内容的左侧？
【发布时间】：2021-07-19 23:09:20
【问题描述】：

我想用 flex 格式化字段集/图例，以便图例位于字段集内容的左侧。我知道我可以 float:left 传说，但不知何故在 Safari 14 中这不起作用。我该如何解决这个问题？

fieldset {
  display: flex;
  align-items: baseline;
}

legend {
  display: block;
  float: left;
  width: 250px
}

button {
  padding: 10px;
}

<fieldset>
  <legend>Should float in line with content</legend>
  <button>Content</button>
</fieldset>

【问题讨论】：

标签： html css flexbox safari fieldset

【解决方案1】：

您可以设置父display: inline

fieldset {
  display: inline;
}
legend {
  float: left;
  width: 250px
}

<fieldset>
  <legend align="left">Should float in line with content</legend >
  Content
</fieldset>

【讨论】：

问题出在 Chrome 90 中，我的示例看起来正确，我希望保留 <legend> 标签，因为它比 <div> 更易于访问。
我刚刚更新了答案，试试看。在 Safari 上为我工作！
我的问题是，只要你只有一个单词和足够的空间，内联解决方案就可以工作。但内容可能不止于此。我更新了我的示例。