div標籤的邊框中的文本

我知道這是一個老問題，但我想知道將文本放入div標籤的邊框的最佳方式是什麼。這是我div標籤的邊框中的文本

.componentWrapper { 
 
    border: solid cadetblue; 
 
    border-radius: 40px; 
 
    padding: 10px; 
 
    width: 95%; 
 
}

<div class='componentWrapper'>Text inside div </div>

我要添加標題到div標籤的邊框。我知道一個選擇是使用字段集，但我不喜歡採用這種方法。另一種方法是放置一個盒子並將其向上移動並設置背景顏色，但是當您在頁面上設置不同的背景色時，我認爲這會失敗。

這是最好的解決方案是什麼？

來源

2017-03-07 tmp dev

我開始與內'span'和僞元素...... 20分鐘後。我停了下來，因爲這將是一個瘋狂的像素匹配，使其工作，所以你有2（合理的）選項，'fieldset'或使用SVG的邊界/文本...爲跨瀏覽器支持我推薦'fieldset'，作爲我看不出任何**理由，甚至沒有人願意/喜歡是一個足夠好的理由，只是簡單地使用它們意圖使用的元素，或者你最終會得到無效的代碼，在每個地方 – LGSon

但這不是一種形式，這就是爲什麼我想避免使用fieldset。 –

其有效無：http://stackoverflow.com/questions/9812898/is-it-wrong-to-use-the-fieldset-tag-without-form-tag – LGSon

我建議類似的東西，使用position:absolute：

.componentWrapper { 
 
    border: solid cadetblue; 
 
    border-radius: 40px; 
 
    padding: 15px 10px 10px; 
 
    width: 95%; 
 
} 
 

 
.componentWrapper .header { 
 
    position:absolute; 
 
    margin-top:-25px; 
 
    margin-left:10px; 
 
    color:white; 
 
    background:cadetblue; 
 
    border-radius:10px; 
 
    padding:2px 10px; 
 
}

<div class='componentWrapper'><div class="header">Headline</div>Text inside div </div>

來源

2017-03-08 13:15:22 Psi

div標籤的邊框中的文本

回答

相關問題