Question

我目前正在尝试在两个div容器之间放置一个hr中断，但是当我将hr标记放在我的HTML中的两个div之间时，它最终显示在第一个div容器的中间。

我的HTML目前看起来像这样：

            <div id = "updatestatus" class = "statuscontainer">
                <div class = "verticalalign">Update Status</div>
            </div>
            <hr width = 90%>

            <div id = "insertstatus" class = "statuscontainer">
                <form></form>
            </div>

如您所见，我将hr标记放在我的主要两个div容器之间。但是，当我尝试查看HTML时，hr显然位于我的第一个div容器的中间。不幸的是，我无法发布图片来展示正在发生的事情，因为这是我的第一篇文章。谢谢！编辑：这里是两个div的父容器的CSS：

#statuscontainer{
position: absolute;
border: 1px solid black;
margin-top: 6em;
height:10em; width: 35em;
}

和两个容器的CSS：

#updatestatus{
position: absolute;
top:0;
height: 2em; width: 35em;
border:1px solid black;

}

#insertstatus{
position:absolute;
top: 2em;
height:5.5em; width:35em;
border:1px solid black;
}

Answer 1

你的CSS可能存在问题。

我刚刚运行了你的html代码并且很好。

在CSS文件中查找有关hr元素的样式。

此外，请在发布时整理HTML代码 - 您可以使用http://www.dirtymarkup.com/等在线工具

Answer 2

您的CSS中最有可能导致错位。也许尝试像这样浮动元素：

.statuscontainer {
float:left;
}

hr {
float:left;
}

Answer 3

你可以尝试做一些其他事情，比如添加另一个div并将其变成更灵活的水平线，例如：

        <div id = "updatestatus" class = "statuscontainer">
            <div class = "verticalalign">Update Status</div>
        </div>

        <div id = "line">
        </div>

        <div id = "insertstatus" class = "statuscontainer">
            <form></form>
        </div>

然后在css上你可以做到：

#line{
add a bottom border here and give it a width height and whatever you want, that will be your new horizontal line
}

如何正确放置<hr />元素？

3 个答案: