我很难设置表单中编号列表项的<fieldset>的样式。
我创建了一个表单，并将每个问题都设置为有序列表中的项目，如下所示：
<li>
<label>foo</label>
<input type='text'>
</li>
<li>
<label>baz</label>
<textarea></textarea>
</li>现在，我正在尝试设置每个列表元素的样式，以便每个列表编号和问题(<label>元素(一起显示在一行上，并且交互式小部件显示在下面的行上。对于由内联元素组成的问题来说，这很容易，但是我在使用<fieldset>组合在一起的复选框和单选按钮时遇到了麻烦。
我删除了<fieldset>和<legend>元素的默认样式，以尝试使这些问题看起来像表单中的其他列表项。但是现在我得到了这种非常奇怪的行为，其中列表编号与底部输入选项对齐(而不是与标签对齐(。
更改list-style-position无济于事，摆弄<input>或<label>样式似乎不会影响它。我尝试将<ol>更改为display: flex并用它做一些事情，但这也没有做任何事情。
有效的方法是一起去除字段集元素，但是按钮和问题之间没有语义关系，我知道这对屏幕阅读器很重要。我相信我也可以一起摆脱编号，但我不想。在我开始编写此表单之前，我查了一下，没有什么可说的，在<li>中嵌套元素是一个问题。
我发现这个博客是样式<fieldset>的指南，但它并没有帮助我解决问题。
这是一个小提琴，演示了我的问题(Q1 和 Q3 展示了我要达到的效果;问题 2 有一个奇怪的样式问题(。
https://jsfiddle.net/ocfk23un/45/
基本上，我想要这个问题的解决方案，或者我想知道为什么在我放弃使用字段集之前会发生这种情况。
你应该继续使用你拥有的 HTML，因为它在语义上是正确的。 您只需要在fieldset样式中添加vertical-align: top;：
fieldset {
display: inline;
padding: 0;
border: 0;
vertical-align: top;
}