html - fieldset 中的两个图例

Question

给定的字段集不能有两个图例，但是有没有办法在不使用 <legend> 的情况下获得图例效果？标签？

<!-- left legend -->
<fieldset>
    <legend>
        Some Text
    </legend>
</fieldset>

我可以添加align=right到图例标签，使其位于右侧，但同样，我不能有两个图例。我想要左边有图例，右边有类似图例的东西。类似于下图。

如何使用 HTML 和 CSS 完成此操作？ Here's a Fiddle ，我基本上想把这两个结合起来。左边是常规图例文本，右边是下拉菜单(如果重要的话)。

更新

这是我正在使用的一些代码:

#shifter {
  position: relative;
}
#cataright {
  position: absolute;
  top: -25px;
  right: 20px;
  font-weight: bold;
}
.grey {
  padding: 15px;
  padding-left: 30px;
  padding-right: 30px;
  border: solid black 3px;
  border-radius: 7px;
  background-color: #DDDDDD;
}

<fieldset class="grey" id="shifter">
  <legend>
    Title
  </legend>
  <div id="cataright">
    Sort by
    <select id="sort" onchange="sort();">
      <option value="original">Release Date</option>
      <option value="popularity">Popularity</option>
      <option value="rating">Highest Rated</option>
    </select>
  </div>
</fieldset>

Answer 1

您可以通过添加一个额外的元素并将其绝对定位在 <fieldset> 中来做到这一点:

fieldset {
  position: relative;
}
.legend2 {
  position: absolute;
  top: -0.2em;
  right: 20px;
  background: #fff;
  line-height:1.2em;
}

<fieldset>
  <legend>
    Some Text
  </legend>
  <div class="legend2">Some other Text</div>
</fieldset>