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

DEMO：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> 
    <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; 
} 
} 

示例here。