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

Question

我正在尝试使用 CSS 在框的上侧插入文本，但我无法想出任何方法来实现它。到目前为止，这是我的代码:

.boxed{
    border: 1px solid grey;
    width: 300px;
    height: 180px;
}

这就是我想做的:

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

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

http://jsfiddle.net/3y539gvq/

Answer 1

将您的框设置为相对定位并使用绝对定位定位标签。另外，我建议设置容器的背景，并在标签 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>

演示:http://jsfiddle.net/b7a29fsd/1/