Html 如何在同一行中显示字段集的两个图例？

我有一个名为“输入”的字段集。我想说明字段集中的字段是强制性的，因此尝试在它们前面放一个红星。下面的代码在字段集的行中给出了星号，但将字段集中的标题“Input”放在另一行上。我怎么能把它们放在同一行，使标题看起来像“*Input”，而*是红色的

<fieldset style="border: 2px solid; ">
    <legend style="color:#685645;font-weight:bold;font-size:1.1em">*</legend>
    <legend style="color:#696969;font-weight:bold;font-size:1.1em">Input</legend>
</fieldset>

*
输入

像这样

CSS

   fieldset{
    float:left;
    width:300px;
  }
span{
    color:red;
}

.mandatory::before {
  content: "* ";
  color: red;
}

HTML

 <fieldset style="border: 2px solid; ">
    <legend style="color:#685645;font-weight:bold;font-size:1.1em"><span>*</span>  Input</legend>

</fieldset>

<legend class="mandatory">Input</legend>

*输入

像这样

HTML

}

---

}

另一种选择是使用

：：before

，如：

HTML

 <fieldset style="border: 2px solid; ">
    <legend style="color:#685645;font-weight:bold;font-size:1.1em"><span>*</span>  Input</legend>

</fieldset>

<legend class="mandatory">Input</legend>

---

然后就有了一个可重用的类。

使用

display:inline对于图例元素…同样，放弃内联样式。使用类和
CSS
工作表。即使是这个小片段也很混乱。
.mandatory::before {
  content: "* ";
  color: red;
}