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标签的边框中的文本

回答

相关问题