html – 字段集中的两个图例

概述对于给定的字段集,您不能有两个图例,但有一种方法可以在不使用< legend>的情况下获得图例效果.标签？ <!-- left legend --><fieldset> <legend> Some Text </legend></fieldset> 我可以将align = right添加到图例标记以使其位于右侧,但同样,我不能有两个图例.我想在左边有一个传说,有 对于给定的字段集,您不能有两个图例,但有一种方法可以在不使用< 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  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>

解决方法 你可以通过添加一个额外的元素并在< fIEldset>中绝对定位它来做到这一点. ：

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

<fIEldset>  <legend>    Some Text  </legend>  <div >Some other Text</div></fIEldset>

总结

以上是内存溢出为你收集整理的html – 字段集中的两个图例全部内容，希望文章能够帮你解决html – 字段集中的两个图例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。