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