html - 不使用 标签是否可以实现类似 的效果？

Question

我个人喜欢 <fieldset> 标签，因为它如何绘制一个框并放置 <legend> 在它的顶部，越过边界。像这样。

然而，fieldset元素被用来组织forms , 用它做一般设计并不比用表格做一般设计好。所以，我的问题是... 如何使用另一个标签实现相同的结果？ 必须删除 <legend> 下的边框(或将使用的任何其他标签)，并且由于可能有一个“复杂”的 body 背景图像，我不能只设置 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>