不使用

标签是否可以实现类似

的效果？

我个人喜欢<fieldset> http://www.w3.org/wiki/HTML/Elements/fieldset标签，因为它如何绘制一个盒子并放置<legend> http://www.w3.org/wiki/HTML/Elements/legend在它的顶部，越过边界。像这样。

但是，那fieldset元素被用来组织forms http://www.w3.org/wiki/HTML/Elements/form，并且使用它进行通用设计并不比使用表格进行通用设计更好。所以，我的问题是...如何使用另一个标签获得相同的结果？边框必须被删除<legend>（或将使用的任何其他标签），并且由于可能存在“复杂”的身体背景图像，我不能只设置background-color图例的名称与下面的元素相匹配。

我希望它无需 JavaScript 即可工作，但 CSS3 和基于 XML 的格式（例如 SVG 或 XHTML）也可以。

演示 jsBin 链接 http://jsbin.com/ulema

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