Question

我试图在表单顶部添加两个图例。我需要两个传说来显示内联而不是一个堆叠在另一个之上。

像这样：

- - - - --- legendOne ----- LegendTwo

如何在CSS中实现该布局？

这是当前的CSS设置：

legend {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:bold;
  margin-left: 25px;
  color: #FFFFFF;
  background: #00BCE6;
  border: 1px solid #00BCE6;
  padding: 5px 15px;
}

Answer 1

您可以将图例设置为float:left并添加一些margin-top，如下所示：

fieldset {
    margin-top:25px; 
}

legend {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:bold;
  margin-left: 25px;
  color: #FFFFFF;
  background: #00BCE6;
  border: 1px solid #00BCE6;
  padding: 5px 15px;
  float:left;
  margin-top:-25px;
}

<fieldset>
    <legend>legend 1</legend>
    <legend>legend 2</legend>
    <br />
    Input <input type="text" />
</fieldset>

结果如下所示：https://jsfiddle.net/4ekec329/（我还在margin-top添加了一些fieldset，并且需要在图例后添加换行符）。这是在FF 41，IE 11和Chrome 46中测试的，但我不能保证它在其他浏览器中也会如此。

fieldset通常只包含一个legend，因此这不是标准HTML，在某些浏览器中可能会中断。

Answer 2

您可以在图例中放置2个span元素，然后替换它们：

 <fieldset>
    <legend><span>first</span><span>second</span></legend>

＆＃13;

legend {
    margin-left:25px;
}
legend span {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:bold;  
  color: #FFFFFF;
  background: #00BCE6;
  border: 1px solid #00BCE6;
  padding: 5px 15px;
}
legend span+span {
    margin-left:25px;
}

＆＃13;

<fieldset>
    <legend><span>first</span><span>second</span></legend>
<br /><br /><br /><br />
</fieldset>

＆＃13;

以html格式显示内联的两个图例

2 个答案: