Html 场集中的两个传奇

对于给定的字段集，不能有两个图例，但是有没有一种方法可以在不使用

标记的情况下获得图例效果

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

标题
排序
发布日期
人气
最高评级

您可以通过添加一个额外的元素并将其绝对定位在

中来实现这一点：

字段集{
位置：相对位置；
}
.传奇2{
位置：绝对位置；
顶部：-0.2米；
右：20px；
背景：#fff；
线高：1.2米；
}

一些文本
其他一些文本

您可以使用

：after

伪选择器来实现这一点。 这样，您就不必使用任何额外的html标记

fieldset {
    position: relative;
}

fieldset:after {
    content: "Some Text";
    position: absolute;
    margin-top: -25px;
    right: 10px;
    background: #fff;
    padding: 0 5px;
}

---

我也有同样的问题，但这里的答案并不让我满意。所以我制定了自己的解决方案
我的解决方案基于div标签。只需使用图例标记的宽度和div标记的宽度即可。还可以设置更多文本
下面你可以找到三个不同的例子

传奇
其他东西
传奇
其他东西
传奇
更多的东西
其他东西

好的，我已经在没有背景色“hack”或使用fieldset标记的情况下成功地做到了， 唯一需要注意的是，试图获得圆角可能有点棘手

基本上，我们的“面板”将是一个框，我们在其中绘制其左、下和右边框。 然后，我们的“面板标题”元素将绝对位于面板顶部

每个面板跨度正好占面板宽度的50%，并使用display flex来实现这一神奇的效果。对于第一个跨距，我们使用before元素从左侧绘制宽度为1em的边框，然后使用after元素设置“flex grow:1”以指示它占用剩余空间

然后，我们对最后一个跨度执行完全相同的操作，只是将宽度和flex grow属性反转。 i、 e.最后一个跨度的before元素将改为flex grow:1，其after元素的宽度为1em

无论如何，请检查下面的代码段

*{
框大小：边框框；
}
身体{
背景：url(https://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
保证金：0；
字体系列：“Roboto Slab”；
}
.小组{
背景：rgba（0,0,0,0.8）；
宽度：75vw；
高度：-网络工具包最大内容；
高度：最大含量；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：#fff；
填充物：0.5em 1em；
左边框：1px实心#fff；
边框底部：1px实心#fff；
右边框：1px实心#fff；
}
.小组标题{
显示器：flex；
位置：绝对位置；
左：0；
右：0；
顶部：-25px；
高度：30px；
线高：30px；
字体大小：30px；
空白：nowrap；
文本阴影：2PX2PX1PXRGBA（0,0,0,0.8）；
}
.panel title>span{
显示器：flex；
宽度：50%；
}
.面板标题>跨度：之前，
.panel title>span:after{
内容：''；
边框底部：1px实心#fff；
边缘底部：5px；
自对准：柔性端；
}
.面板标题>跨度：第一个孩子：之前{
宽度：1米；
右边距：5px；
}
.面板标题>跨度：第一个孩子：之后{
左边距：5px；
柔性生长：1；
}
.面板标题>跨度：最后一个子项：之前{
柔性生长：1；
右边距：5px；
}
.panel title>span:最后一个子项：之后{
宽度：1米；
左边距：5px；
}

富吧
斯内
 Lorem ipsum dolor sit amet，是一位杰出的献身者。tincidunt的posuere tempus mauris餐厅。
 设施的相位为leo tortor，nec molestie purus Dignessim non。整型马萨turpis，带端口和端口。

同样，如果不支持（父级）背景图像，一切似乎都很简单。我的意思是，如果字段集的父级需要一些图像（或渐变）背景，则会显示

legend2

的纯色背景（白色），当然这是不可接受的。这取决于用例。尝试将相同的背景应用于

legend2

，适当的

背景位置可能会有所帮助。纯白色即可。这真的没关系，我更关心的是如何去做，而不是实际实现它。一次一个障碍。谢谢你的帮助@riista我看到了这个问题，这个用例是不同的，需要另一种方法。我现在没有时间找到解决方案，直到明天，但您可以针对该特定用例问另一个问题，我是舒尔，其他人可以找到解决方案。@riista如果字段集的父项只是纯色背景（白色），我相信您可以使用此答案提供的解决方案，这不是你想要的吗？Chrome中正确的对齐方式是
top:-3px，而在FF中，它似乎是
顶部：-20px已更新我的答案。现在，它适用于FF和Chrome。检查小提琴。这一点可以用中文回答