框内的标题- CSS，FrontEnd开发- UX

Question

帮助。我在UX不是很好。我正在创建一个应用程序的反应和使用材料用户界面的外观。我真的很想创造这样的东西：

​

​

其中“一些标题”是来自我的数据库的一个动态字段以及内容。我想不出的是，在大纲中添加标题的最佳方法是什么？有什么想法？

Answer 1

您可以通过绝对定位标题的负上边来实现这一点。标题需要显示:带白色背景的内联块和填充，这样边框就不会显示出来。

​

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

​