框内的标题-CSS，FrontEnd Dev-UX

问题描述

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

“ Some Title”是我数据库中的动态字段及其内容。我无法弄清楚的是将标题添加到轮廓中的最佳方式（非卑鄙的方式）是什么？有想法吗？

解决方法

您可以通过绝对定位标题负上边距来完成此操作。标题需要显示：带有白色背景的内嵌块并带有填充，以免边框不显示。

my-package

.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;
}