Question

我知道这是一个老问题，但我想知道将文本放入div标签边框的最佳方法是什么。这就是我所拥有的

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

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

我想在div标签的边框中添加标题。我知道一个选项是使用fieldsets但我不喜欢这种方法。另一种方法是放置一个框并将其向上移动并设置背景颜色，但我认为当您在页面上设置不同的背景颜色时，这会失败。

最佳解决方案是什么？

Answer 1

我建议使用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>

div标签边框中的文本

1 个答案: