在fieldset中的两个传说

Question

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

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

我可以添加align=right到图例标签,使其在右侧,但再次,我不能有两个传说.我想在左边有一个传说,有点像右边的传说.像下图这样的东西.

如何使用HTML和CSS实现此目的？这是一个小提琴,我基本上想要将这两者结合起来.左侧是常规图例文字,右侧是下拉列表,如果重要的话.

更新

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

#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>