Question

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

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

我可以将align=right添加到图例标记以使其位于右侧，但同样，我不能有两个图例。我想在左边有一个传奇，而在右边有一个传奇。如下图所示。

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

Fieldset with 2 legends

更新

以下是我正在使用的一些代码：

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

Answer 2

您可以使用:after伪选择器来实现此目的。 SEE THE DEMO。这样，您就不必使用任何其他html标记。

fieldset {
    position: relative;
}

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

Answer 3

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

<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
	<legend style="width: 100%; padding: 0;">
		<div style="display: inline-block; line-height: 1.2;">
			<div style="float: left; padding: 0 5px;">Legend</div>
			<div style="float: left; height: 1px; background-color: black; width: 359px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Other Stuff</div>
		</div>
	</legend>	
</fieldset>
<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
	<legend style="width: 81%; padding: 0;">
		<div style="display: inline-block; line-height: 1.2;">
			<div style="float: left; height: 1px; background-color: black; width: 78px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Legend</div>
			<div style="float: left; height: 1px; background-color: black; width: 186px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Other Stuff</div>
		</div>
	</legend>	
</fieldset>
<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
	<legend style="width: 90%; padding: 0;">
		<div style="display: inline-block; line-height: 1.2;">
			<div style="float: left; height: 1px; background-color: black; width: 39px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Legend</div>
			<div style="float: left; height: 1px; background-color: black; width: 88px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">More Stuff</div>					
			<div style="float: left; height: 1px; background-color: black; width: 102px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Other Stuff</div>
		</div>
	</legend>	
</fieldset>

注意：显示内联块和行高：1.2是跨浏览器兼容性所必需的。

Answer 4

好吧，我设法做到了没有背景色“ hack”或使用fieldset标签，唯一的警告是，试图弄圆角可能会有些棘手。

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

每个面板跨度恰好占据面板宽度的50％，并使用display flex魔术。对于第一个跨度，我们使用before元素从左侧绘制宽度为1em的边框，然后使用after元素设置“ flex-grow：1”以告诉它占据其余空间。

然后，我们对最后一个跨度执行完全相同的操作，除了将width和flex-grow属性反转。即将最后一个span的before元素设置为flex-grow：1，其after元素的宽度为1em。

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

* { 
  box-sizing: border-box;
}
body {
  background:url(https://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  margin: 0;
  font-family: 'Roboto Slab';
}

.panel {
  background: rgba(0,0,0,0.8);
  width: 75vw;
  height: -webkit-max-content;
  height: max-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  padding: 0.5em 1em;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  
}
.panel-title {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: -25px;
  height: 30px;
  line-height:30px;
  font-size: 30px;
  white-space: nowrap;
  text-shadow: 2px 2px 1px rgba(0,0,0,0.8);
}
.panel-title > span {
  display: flex;
  width: 50%;
}
.panel-title > span:before,
.panel-title > span:after {
  content: '';
  border-bottom:1px solid #fff;
  margin-bottom:4px;
  align-self:flex-end;
}
.panel-title > span:first-child:before {
  width: 1em;
  margin-right: 5px;
}
.panel-title > span:first-child:after {
  margin-left: 5px;
  flex-grow: 1;
}
.panel-title > span:last-child:before {
  flex-grow: 1;
  margin-right: 5px;
}
.panel-title > span:last-child:after {
  width: 1em;
  margin-left: 5px;
}

<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>

<div class='panel'>
  <DIV class='panel-title'>
    <SPAN>Foo Bar</SPAN>
    <SPAN>Snee</SPAN>
  </DIV>
  <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere tempus mauris at tincidunt.</P>
  <P>Phasellus facilisis leo tortor, nec molestie purus dignissim non. Integer massa turpis, porta sed erat sed.</P>
</div>

在fieldset中的两个传说

4 个答案: