Question

我个人喜欢<fieldset>标记，因为它会绘制一个框并将<legend>放在边框上方。像这样。

example image of what I'm trying to achieve

但是，fieldset元素用于组织forms，并且将其用于一般设计并不比使用表格进行一般设计更好。所以，我的问题是...... 如何使用其他标记获得相同的结果？必须在<legend>（或将使用的任何其他标记）下删除边框，并且因为可能存在“复杂的”身体背景图像，所以我不能只设置图例的background-color以匹配下面的元素之一。

我希望它能在没有JavaScript的情况下工作，但CSS3和基于XML的格式（如SVG或XHTML）都可以。

Answer 1

Demo jsBin link

.fieldset {
  border: 1px solid #ddd;
  margin-top: 1em;
  width: 500px;
}

.fieldset h1 {
  font-size: 12px;
  text-align: center;
}

.fieldset h1 span {
  display: inline;
  border: 1px solid #ddd;
  background: #fff;
  padding: 5px 10px;
  position: relative;
  top: -1.3em;
}

<div class="fieldset">
  <h1><span>Title</span></h1>
  <p>Content</p>
</div>

Answer 2

不，这不太可能。 Even browser makers themselves are struggling with that.

当然，无论如何我无法抗拒。我花了很多时间，Anonymous提出了一个与我的相似的“解决方案”（他的test1）。但我的不需要固定宽度的“传奇”。

这段代码显然有点像黑客，我不知道它在复杂网站上的表现如何。我也同意Anonymous的说法，使用字段集进行分组并不像使用表格进行布局那么糟糕。字段集设计用于分组元素，但在HTML中它们实际上只应该用于分组表单控件。

.fieldset {
  border: 2px groove threedface;
  border-top: none;
  padding: 0.5em;
  margin: 1em 2px;
}

.fieldset>h1 {
  font: 1em normal;
  margin: -1em -0.5em 0;
}

.fieldset>h1>span {
  float: left;
}

.fieldset>h1:before {
  border-top: 2px groove threedface;
  content: ' ';
  float: left;
  margin: 0.5em 2px 0 -1px;
  width: 0.75em;
}

.fieldset>h1:after {
  border-top: 2px groove threedface;
  content: ' ';
  display: block;
  height: 1.5em;
  left: 2px;
  margin: 0 1px 0 0;
  overflow: hidden;
  position: relative;
  top: 0.5em;
}

<fieldset>
  <legend>Legend</legend> Fieldset
</fieldset>

<div class="fieldset">
  <h1><span>Legend</span></h1> Fieldset
</div>

作为旁注，您可能还想查看HTML5 figure和figcaption元素。这些似乎是你的例子中最好的元素。

这只是针对问题的语义部分，因为我不认为这些元素与字段集/图例的呈现方式相同。更不用说当前的浏览器可能还不支持这些元素。

Answer 3

然而，它是为了组织形式，并将其用于一般设计并不比使用表更好一般设计

这是错误的。使用表格进行布局的主要问题是几乎没有布局映射到表格数据。第二个问题是，没有映射到表格数据的那些都不是表格数据，而其中一些不是表格数据。也就是说，标记的语义与页面的语义不匹配。另外，实际上，表的布局机制通常会使自定义样式和纯文本浏览变得痛苦或不可能。

现在，fieldset显然有意为表单字段分组。选择一个外观元素几乎总是一个标志，这是一个糟糕的选择。然而，对于这个具体的例子，我认为包含列表的字段集+图例几乎没有缺点（事实上，我能想到的唯一一个是scaper，它天真地将字段集解释为表示一个表单，然后浪费用户的时间枚举它的内容不同;但我知道实际上没有做到这一点）。这样做的主要原因是表单元素用于包含输入的功能和语义目的，而fieldset早期具有特殊的，不可再现的视觉效果。此外，如果fieldset中的可视元素以任何方式起作用，那么在语义上，fieldset再次包含一组交互式小部件，这是原始点。

我的建议是，如果你愿意，可以使用它。我不会，但不是因为语义方面的考虑：我不喜欢依赖特殊效果，而是避免形式优于函数。

无论如何，这里有一些可以咀嚼的东西：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">

.fake_fieldset {
	border: 2px groove ButtonFace;
	border-top-width: 0;
	margin-left: 2px;
	margin-right: 2px;
	padding: .35em .625em .75em;
	margin-top: 1em;
	position: relative;
}

.fake_legend {
	margin-top: -1em;
}

.fake_legend.test1::before {
	position: absolute;
	top: 0;
	left: -1px;
	border-top: 2px groove ButtonFace;
	content: " ";
	width: 0.5em;
}

.fake_legend.test1::after {
	position: absolute;
	top: 0;
	right: -1px;
	border-top: 2px groove ButtonFace;
	content: " ";
	width: 80%;
}


.fake_fieldset.test2 {
	padding: 0;
	padding-top: 1px; /* no collapsed margin */
}

.fake_fieldset.test2 .fake_fieldset.container {
	margin: 0;
	border: 0;
}

.fake_legend.test2 {
	display: table;
	width: 100%;
}

.fake_legend.test2 span {
	display: table-cell;
}

.fake_legend.test2 span:first-child {
	width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
	width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
	/* the rest of this code is left as an exercise for the reader */
}


</style></head><body>

<fieldset><legend>foo</legend>bar</fieldset>

<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>

<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>

</body></html>

Answer 4

这里有一个可能的解决方案，专注于简单性（如果你可以放弃对透明背景的要求）。没有其他元素。

＆＃13;

section {
  border: 2px groove threedface;
  padding: 1em;
}

section h2 {
  float: left;
  margin: -1.7em 0 0;
  padding: 0 .5em;
  background: #fff;
  font-size: 1em;
  font-weight: normal;
}

＆＃13;

<section id=foo>
  <h2>
    Foo
  </h2>
  bar
</section>

＆＃13;

Answer 5

如果您还需要使用border-radius：

body {
  font-family: monospace;
}

.not-a-fieldset {
  border: 3px solid blue;
  border-top: none;
  padding: 0 16px 16px;
  margin: 28px 0 0;
  border-radius: 4px;
}

.not-a-legend {
  font-size: 20px;
  margin: 0 -19px;
  overflow: hidden;
  transform: translate(0, -13px);
}

.not-a-legend > span {
  float: left;
  padding: 0 8px;
  line-height: 24px;
}

.not-a-legend::before,
.not-a-legend::after {
  content: '';
  height: 8px;
}

.not-a-legend::before {
  border-top: 3px solid blue;
  border-left: 3px solid blue;
  border-top-left-radius: 4px;
  float: left;
  margin: 10px 0 0;
  width: 8px;
}

.not-a-legend::after {
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-top-right-radius: 4px;
  position: relative;
  display: block;
  left: 0;
  top: 10px;
  overflow: hidden;
}

<section class="not-a-fieldset">
  <h1 class="not-a-legend">
    <span>Legend</span>
  </h1>
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

Answer 6

我相信你已经知道了答案。

你有2个选项，提供你自己的边框（这是很多不必要的工作）或者定位一个遮挡边框的元素（问题是你只能拥有纯色背景，但也许没关系）。

据我所知，没有什么可以做的，可以在每个浏览器中很好地进行这种锻炼。我喜欢你的风格，这是正确的方法，但可能不是一个你能够以令人满意的方式解决的问题。

我对这些主题的一般看法是，你不应该尝试用网络做一些事情，这需要A）过度努力或B）标记解决方案，这开始并不是完全明显的。网络有局限性，你可以很好地与他们合作，而不是试图解决这些限制。

所以我不得不问，＆lt; legend /＆gt;有什么问题？

Answer 7

我得到了一个合理的结果。

＆＃13;

SimpleConsumer consumer = new SimpleConsumer ("zookeeperhost", 1234, 100000, 64 * 1024, "leader_lookup");
List<String> topics = Collections.singletonList("some_event");
TopicMetadataRequest req = new TopicMetadataRequest(topics);
TopicMetadataResponse resp = consumer.send(req); //this is the line that is causing the error
List<TopicMetadata> metaData = resp.topicsMetadata();

＆＃13;

Answer 8

我更新了Anonymous的建议：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">

.fake_fieldset {
    border: 2px groove ButtonFace;
    border-top-width: 0;
    margin-left: 2px;
    margin-right: 2px;
    padding: .35em .625em .75em;
    margin-top: 1em;
    position: relative;
}

.fake_legend {
    margin-top: -1em;
}

.fake_legend.test1::before {
    position: absolute;
    top: 0;
    left: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 0.5em;
}

.fake_legend.test1::after {
    position: absolute;
    top: 0;
    right: -1px;
    border-top: 2px groove ButtonFace;
    content: " ";
    width: 80%;
}
.fake_legend.test1 div {
    z-index: 100;
    background: white;
    position: relative;
    float: left;
}


.fake_fieldset.test2 {
    padding: 0;
    padding-top: 1px; /* no collapsed margin */
}

.fake_fieldset.test2 .fake_fieldset.container {
    margin: 0;
    border: 0;
}

.fake_legend.test2 {
    display: table;
    width: 100%;
}

.fake_legend.test2 span {
    display: table-cell;
}

.fake_legend.test2 span:first-child {
    width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
    width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
    /* the rest of this code is left as an exercise for the reader */
}
</style></head><body>

<fieldset><legend>foo</legend>bar</fieldset>

<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>

<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>

</body></html>

Answer 9

使用::before伪元素生成模拟<fieldset>的顶部边框，然后将模拟的<legend>元素放在::before块上z-index和{ {1}}属性。最后，在模拟字段集的顶部使用渐变和纯色停止，将线性渐变的顶部颜色设置为透明，这样伪字段集后面的任何背景都将可见。

是否可以在不使用<fieldset>标签的情况下实现类似<fieldset>的效果？</fieldset> </fieldset>

9 个答案: