CSS div 标题位置答案

【问题标题】：CSS div title positionCSS div 标题位置
【发布时间】：2012-06-11 14:33:46
【问题描述】：

是否可以让 div 的标题看起来像这样：

我知道我可以将文本“Div Title here”放在 div 中，给它一个坚实的背景并用绝对坐标定位它，但我希望标题与 div 相关联，而不是与整个文档相关联，所以我可以移动 div 而不必担心移动标题。

我在这里设置了一个小提琴：http://jsfiddle.net/Eth6U/。

【问题讨论】：

【解决方案1】：

您可以使用<fieldset> 标记来执行此操作...

这是一个例子......

<fieldset>
    <legend>Div title here...</legend>
</fieldset>

您可以像在 CSS 中编辑 <fieldset> 标记一样编辑 <div>...

【讨论】：

【解决方案2】：

您可以使用fieldset 和legend 标签。

例如：

<fieldset>
    <legend>The title</legend>
    <p>hello!</p>
</fieldset>

【讨论】：

【解决方案3】：

听起来您正在寻找fieldset 和legend。

<fieldset>  
  <legend>Title</legend>  
  ...
</fieldset>

【讨论】：

【解决方案4】：

这是在on SitePoint.com 讨论过的，似乎最好的方法是在 div 中嵌套一个 div 并使用负边距来正确定位它，我相信你不想这样做。

您正在尝试做的与表单的字段集图例非常相似，您可以使用该 html 并使用 CSS 设置样式来自定义它的外观。 Examples

【讨论】：

【解决方案5】：

<fieldset>
<legend>Div Title Here</legend>
<!-- Write your code here what do you want in that fieldset-->
</fieldset>

【讨论】：