如何在文本下定位<hr />行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>，如下例所示：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

隐藏<hr>并尝试将该行添加到该段落中。

像这样：

#toptext p {
    border-bottom: 1px solid red;
    line-height: 66px;
}

然后调整行高。

Answer 3

删除所有多余的css overkill和lets keep life simple :)

<强> HTML

  <p>MatthewTheBottleFlipper</p>

<强> CSS

p {
    font-family:"Open Sans", san-serif, Arial;
    font-size:500%;
    color:#000;
    text-align:center;
    position:absolute;
    top:5px;
    text-align:center;
    left:15%;
    border-bottom:solid 1px #000; /* u need this */
    padding-bottom:3px /* ...and this */
}

Answer 4

p标签自然有边距和填充。只需删除它，一切都会按你想要的方式运行：

#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%;
}

#line {
height:0.5px;
background-color:#03f;
margin-top: 3px /* I can't position this three pixels under text */
}

p { padding: 0; margin: 0; }