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>

如何仅概述HTML中的元素

2 个答案: