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/

Answer 2

您可以使用：

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

Answer 3

您可以像这样在div内放置文本：

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

CSS：

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

.boxed p{
    position:relative;
    top:-28px;
    left:5px;
    z-index:1;
    background-color:white;
    width:80px;
}
}

这里的例子。