标题框内轮廓 - CSS，前端开发 - UX

Question

求助。我不擅长 UX。我正在 React 中创建一个应用程序并使用 Material UI 进行外观。我真的很想创建这样的东西：

其中“某些标题”是我的数据库中的动态字段以及内容。我无法弄清楚的是将标题添加到大纲中的最佳（非卑鄙）方式是什么？想法？

Answer 1

您可以通过使用负上边距对标题进行绝对定位来实现此目的。标题必须是 display:inline-block，带有白色背景和填充，这样边框就不会显示出来。

.borderd-content {
  border: 1px solid #0000ff;
  border-radius: 4px;
  height: 100px;
  margin-top: 20px;
  position: relative;
}

.borderd-content .title {
  margin: -10px 0 0 10px;
  background: #fff;
  padding: 3px;
  display: inline-block;
  font-weight: bold;
  position: absolute;
}

.borderd-content .content {
  padding: 10px;
}

<div class="borderd-content">
  <div class="title">Title</div>
  <div class="content">asdsad</div>
</div>