Question

我有一个名为“输入”的字段集。我想表明fieldset中的字段是强制性的，因此试图在它们之前放置一个红色星形。下面的代码给出了fieldset行中的星号，但是将字段集中的标题“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

喜欢这个

<强> DEMO

<强> 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 2

喜欢这个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 3

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

<强> HTML

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

<强> CSS

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

然后你有一个可重复使用的课程。

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

3 个答案: