html - 如何仅概述 HTML 中的元素

Question

我有这个：

< h1 style="position: relative; top: -103px; left: 700px; border-width: thin; border-style: dotted; border-color: grey;">
< small>Three Stars Of The Week</small>
</p>

它给了我一个带有灰色虚线的标题，该虚线结束于标题末端。它转到页面的末尾。

如何修复它以使边框仅围绕字母，而不是一直到页面末尾？

Answer 1

h1是一个块级元素，所以这是预期的行为。将其内容放在一个内联元素（例如span）中并设置样式。

Answer 2

很明显，因为<h>（标题 1 到 6）标签是块元素，所以它会从页面的开始到结束。尝试使用display:inline-block. 像这样的东西

你的 CSS 类

.head-class{
  position:relative; 
  top: -103px; 
  left: 700px; 
  border-width: thin; 
  border-style: dotted; 
  border-color: grey;
  display:inline-block; /* style to make element as inline but block */
}

你的元素

< h1 class="head-class"><small>Three Stars Of The Week</small></h1><br>