Question

您知道在字段集中呈现图例的默认方式吗？

我试图在旁边完成同样的事情。 e.g。

<aside>
<h1>heading</h1>
<p>content</p>
</aside>

我现在拥有的：

aside {
  background-color: #e1d8ee;
  display: block;
  font-style: oblique;
  margin-left: 8%;
  margin-right: 8%;
  border: 2px solid;
  border-radius: 7px;
  border-color: #808080;
  padding: 1em;
}

aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 {
  display: inline;
  background-color: #fcc006;
  margin-left: 1em;
  margin-top: -12em;
  padding: 0.3em;
  font-size: 1em;
  border: 2px solid;
  border-radius: 7px;
  border-color: #808080;
}

无论我设置保证金顶部，它仍然保持在旁边 - 我希望它在一边 - 一半在它之上，一半在它之上，所以h {n}是旁边因为传说是在fieldset - 其中浏览器很好地在字段集边框中显示图例。

我只是似乎不知道足够的CSS来实现这一点，甚至不足以知道正确的搜索术语来找到解决方案。

感谢您的建议。

Answer 1

您可以尝试使用＆＃34; position：relative＆＃34;并使用＆＃34; top：＆＃34;

定位元素

示例：

 aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 {
  display: inline;
  background-color: red;
  margin-left: 1em;  
  padding: 0.3em;
  font-size: 1em;
  border: 2px solid;
  border-radius: 7px;
  border-color: #808080;
  position: relative;
  top: -1.5em;
  }

CSS移动标题，使其部分位于容器外部

1 个答案: