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

Question

我有一个名为“输入”的字段集。我想表明字段集中的字段是强制性的，因此试图在它们前面加上一个红星。下面的代码在字段集中的行中给出了星号，但将标题“输入”放在了字段集中的不同行上。我怎样才能让它们在同一行，使标题看起来像“* 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>

Answer 1

像这个jsfiddle。

HTML

<fieldset style="border: 2px solid; ">
<legend>
    <span>*</span>
    Input
</legend>
</fieldset>

CSS

legend {
color:#696969;
font-weight:bold;
font-size:1.1em;

}

span {
color:red;
font-weight:bold;
font-size:1.1em;

}

Answer 2

像这样

演示

CSS

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

HTML

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

</fieldset>

Answer 3

另一种选择是使用::before，如：

HTML

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

CSS

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

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