2 {hr />在同一行

Question

我对css和html很新，而且我一直在为一个小型学校项目尝试一些东西。我目前有两条垂直线，像这样。

<hr class="topline" width=58% size=3 NOSHADE>            
<hr class="verticalline" width=0.15% size=1000 NOSHADE>

我有一些css将垂直线一直推到左边，所以我喜欢一些造型的可见边距。但即使它在上面一行的左边，它也不会自我推动。

我希望左边的线从侧面向上推到顶部，这样它就在水平边上。有人可以帮忙吗？

Answer 1

这是正常的，这是一种默认的线条样式。解决方案是添加一个样式margin-top与它的负值（反转的含义）。

试试这个：

<hr style="margin-left:0px;" class="topline" width="58%" size="3" NOSHADE>
<hr style="margin-left:0px;margin-top:-10px" class="verticalline" width="0.15%" size="1000" NOSHADE>

如果您想让它居中，请从样式中删除margin-left:0px;。