html - 如何将 行置于文本下方 3 像素处

Question

因此，在我的网站中，我在前面有一些文字。我想放一个 <hr>文本下方 3 像素，但是即使我尝试动态定位它，<hr>仍然停留在同一个地方。甚至尝试将它定位在这个 JSFiddle 中:

Text on top of HR line 3px

正如您可能会说的那样，我无法定位它...目前，它看起来有点丑。

在我制作的完整网站中，我有一个 <video>正在播放的html标签。它还有一个顶部菜单，以便您可以选择要选择的我的网站类别。这是一个屏幕截图:

我还打算直接在 <hr> 下添加一个按钮，但我认为我应该先解决这个问题。

Answer 1

您当前代码中发生的情况是浏览器默认值为 p {margin: ...some value depending on browser...;} .

所以你必须先添加你自己的CSS规则来覆盖它，这里:#toptext p {margin: 0;} .

然后你可以自由选择如何定位你的<hr>使用其 margin-top .
请注意，由于文本的字体大小较大，它会在其下方保留一些空间，因此您可能必须为 <hr> 使用负边距。 ，如下例所示:

#toptext {
	font-family:"Open Sans", san-serif, Arial;
	font-size:500%;
	color:#000;
	text-align:center;
	position:absolute;
	top:5px;
	text-align:center;
	left:15%;
}
#toptext p {
  margin: 0;
}
#line {
	height: .5px;
	background-color: #03f;
  margin-top: -15px;
}

<div id="toptext">
  <p>MatthewTheBottleFlipper</p>
  <hr id="line"/>
  
</div>