HTML在css框的上边框中插入文本

HTML在css框的上边框中插入文本,html,css,Html,Css,我正在尝试使用CSS在框的上方插入文本,但我想不出任何方法来实现。这是我目前的代码: .boxed{ border: 1px solid grey; width: 300px; height: 180px; } 这就是我想做的: 如何在框的上边框中插入文本 *我已经做完了,谢谢大家。但我现在的问题是将分页放在选项卡上。你能帮我吗?代码的其余部分在这里: 将框设置为相对定位,并使用绝对定位来定位标签。另外,我建议设置容器的背景,并在标签CSS中继承背景,以保持两者的一致

我正在尝试使用CSS在框的上方插入文本,但我想不出任何方法来实现。这是我目前的代码:

.boxed{
    border: 1px solid grey;
    width: 300px;
    height: 180px;
}
这就是我想做的:

如何在框的上边框中插入文本


*我已经做完了,谢谢大家。但我现在的问题是将分页放在选项卡上。你能帮我吗?代码的其余部分在这里:


将框设置为相对定位,并使用绝对定位来定位标签。另外,我建议设置容器的背景,并在标签CSS中继承背景,以保持两者的一致性

.boxed {
    position: relative;
    background: white;
    border: 1px solid grey;
    width: 300px;
    height: 180px;
}
.label {
    background: inherit;
    padding: 0 5px;
    position: absolute;
    left: 5px;
    top: -10px;
}

<div class="boxed">
    <span class="label">General Information</span>
</div>
.boxed{
位置:相对位置;
背景:白色;
边框:1px纯灰;
宽度:300px;
高度:180像素;
}
.标签{
背景:继承;
填充:0 5px;
位置:绝对位置;
左:5px;
顶部:-10px;
}
一般资料

演示:

将框设置为相对定位,并使用绝对定位来定位标签。另外,我建议设置容器的背景,并在标签CSS中继承背景,以保持两者的一致性

.boxed {
    position: relative;
    background: white;
    border: 1px solid grey;
    width: 300px;
    height: 180px;
}
.label {
    background: inherit;
    padding: 0 5px;
    position: absolute;
    left: 5px;
    top: -10px;
}

<div class="boxed">
    <span class="label">General Information</span>
</div>
.boxed{
位置:相对位置;
背景:白色;
边框:1px纯灰;
宽度:300px;
高度:180像素;
}
.标签{
背景:继承;
填充:0 5px;
位置:绝对位置;
左:5px;
顶部:-10px;
}
一般资料
演示:

您可以使用:

.boxed {
    ... your existing styles ...
    position:relative;
}


.boxed:after {
   position:absolute;
   top:-5px;
   left:15px;
   padding:3px;
   content: "your label text";
   background-color: (something to cover up the border underneath)
}
您可以使用:

.boxed {
    ... your existing styles ...
    position:relative;
}


.boxed:after {
   position:absolute;
   top:-5px;
   left:15px;
   padding:3px;
   content: "your label text";
   background-color: (something to cover up the border underneath)
}

您可以在div中放置文本,如下所示:

<div> 
    <p> Some text </p> 
</div>

示例。

您可以在div中放置文本,如下所示:

<div> 
    <p> Some text </p> 
</div>

例如。

使用内容不允许此样式在多个框中重复使用。这实际上取决于您是否需要不同的标签,也可以使用其他仅定义“内容:好主意,但我还是宁愿内联标签以实现可见性。使用内容不允许此样式可重复用于多个框。这实际上取决于您是否需要不同的标签,这也可以通过其他仅定义“内容:好主意,但我还是宁愿内联标签以实现可见性。您的()HTML?你可以使用
字段集/图例
组合-@Paulie_D nice,希望我想到:)@88MPG是的…如果你不关心语义。伙计们,我还有一个问题,你的()HTML是什么?你可以使用
字段集/图例
组合-@Paulie_D nice,希望我能想到:)@88MPG是的……如果你不在乎语义的话。伙计们,我还有一个问题,我现在的问题是在标签上分页。你能帮我吗?其余的代码在这里:我现在的问题是将分页放在选项卡上。你能帮我吗?代码的其余部分在这里: