为什么在关闭div标签后应用hr之后，hr仍然与div元素在同一行上
在关闭div标签后应用hr之后，hr仍然与div元素在同一行上的原因是，div元素是一个块级元素，它会自动占据一行并撑满父容器的宽度。而hr元素是一个水平分隔线元素，它默认也是一个块级元素，会自动占据一行并撑满父容器的宽度。
当在关闭div标签后立即应用hr元素时，hr元素会被当作div元素的兄弟元素而不是子元素。由于div元素是块级元素，会自动换行，所以hr元素也会跟随在div元素的同一行上。此时，即使hr元素是一个块级元素，但由于div元素已经换行了，所以hr元素会被放置在div元素的下一行。
如果希望hr元素在div元素的下方单独占据一行，可以为hr元素添加样式属性display: block;，或者将hr元素放置在div元素的闭合标签后的下一行。
关于div元素和hr元素的更详细介绍和用法，你可以参考腾讯云的前端开发手册中的相关章节：
相关·内容
我有两个在两边(左边和右边)浮动的div元素。我在关闭第一个div标记(向左浮动)和打开下一个div标记(向右浮动)之前应用了hr标记。但是hr标签显示在顶部背景中。要查看hr标记，请查看两个div之间的小连接线(在顶部)。 <!class="Row">
<div</
浏览 54提问于2021-01-27得票数 0
回答已采纳
我写了如下代码： before hr<hr/> </p>
function remove() {
var
浏览 0提问于2019-05-29得票数 0
回答已采纳
3回答
如何垂直对人力资源元素
、、、
如何垂直对齐hr元素？ <div class="table-cell"><hr /></div><div class="table">
浏览 10提问于2014-03-04得票数 8
回答已采纳
完整的列表在一个标准的<p>标记中，我在每个列表项之间有<hr>标记。问题是，只有列表中的第一个链接获得了新的字体大小。第一个链接之后的每个链接都会丢失不仅在链接类定义中定义的所有样式，还会丢失在<p>标记中定义的所有样式。如果删除<hr>标记，则列表中的每个项目都具有正确的样式。font-family: verdana;}
#pane p a.link { font-size: 16px; }
浏览 0提问于2012-09-26得票数 2
我在div类“.class-info”中输入了一些与tinyMCE一起输入的文本。文本可以用hr标记分割。我想要做的是用jQuery分割文本，并将文本的第二部分(在hr标记之后)包装成单独的div。我的代码如下所示：var splitter = $(str.split('<hr>')[1]).html();
浏览 7提问于2012-02-21得票数 1
回答已采纳
我想运行两次中继器控制循环，只显示两个新闻项目，并且我想在第一次循环后隐藏<hr>标签。我不知道如何使用container.index方法来隐藏hr标签。<asp:repeater id="rptRepeater" runat="server"> <div id="one"><%=getTit
浏览 2提问于2013-09-09得票数 0
4回答
我们正在与启动3 CSS框架合作。在页面上，我们有以下代码： <div class="row promo-row">.. other contents ..</div> <div class="row promo-row">.. other
浏览 9提问于2015-02-09得票数 2
回答已采纳
下面是我的密码- <div>Check All </div>
<div</em
浏览 2提问于2016-07-26得票数 0
回答已采纳
大家好，我是WP开发的新手，这是我的客户网站：bit.do/dFQtv我需要在下面的每个博客摘录下面添加hr行阅读更多部分，如何做，如果我插入下面的行阅读更多按钮，显示在单个博客帖子页面也 <!-- AddThis Button END -->
<div cl
浏览 20提问于2017-08-16得票数 0
2回答
<div> <hr style={{marginTop: "10px", marginBottomevent
浏览 4提问于2018-02-18得票数 0
回答已采纳
我想在我的人力资源里加些垫子， padding-left: 200px;}
但这不管用。如何在我的人力资源中添加填充物？
浏览 6提问于2022-05-17得票数 2
回答已采纳
2回答
如果将hr元素抛入justify-content设置为flex-start的flex容器中，则hr将对所有空间进行ocuppy，其他元素将被分发，就好像justify-content被设置为space-between(从2015年开始)解释说，默认情况下，hr的左右边距是auto。然而，火狐的检查器将左右边距的Box模型显示为0，如下面的代码片段和图像所示。或者，在过去的几年里，规范是否发生了变化，而我的Firefox (Quantum60.8.0esr64位在Debian 9上
浏览 0提问于2019-08-01得票数 1
回答已采纳
我甚至删除了错误引用的行，但它仍然会发生。我用的是玉石。 27| a(href="/transfer/redeem#action") Redeem Code 31|
浏览 4提问于2014-08-13得票数 4
2回答
尝试在我正在处理的页面中设置分页符，但在打印预览中，我仍然看到页面上不应该存在的内容。我搞不懂为什么这不管用。在我的css样式中：在我的代码的ASP.NET code...partial视图中，开始标记在那里：<br />
<asp:Literal runat="server" ID=&qu
浏览 2提问于2013-01-31得票数 0
回答已采纳
我试图使一个反应网站在纯css (没有引导)与一个开放/关闭侧边栏。为此，我需要为页面上的元素设置和更改css类，并立即应用它们的可视化更新。在一个非常简单的例子中，有一个状态const [setShowGreenBox, showGreenBox] = React.useState('true');，我试图将它应用/删除到元素中，以显示css</div>
<d
浏览 5提问于2022-04-12得票数 -1
回答已采纳
我在玩一些密码。但是，我有一个问题：如果运行代码，可以看到span元素(用青色表示)与div元素位于同一行。我不明白为什么会这样。我的意思是，我知道解决问题的方法，但我想弄明白为什么它在这种特殊情况下行不通？ width: 200px; cl
浏览 3提问于2020-09-29得票数 0
回答已采纳
3回答
从下面的代码中可以看到，h4和hr标记应该是.settings_title的一部分，但是在检查.options时，它突出显示h4和hr标记是它的一部分(见图)。当向"options“div放置页边距/填充时，当它假定位于段落标记之上时，它会将页边距/填充放在h4和hr标记之上。 </div>
浏览 1提问于2020-07-26得票数 1
回答已采纳
我在HTML页面上有两个DIVs：<div id="divResult" />document.getElementById上面的代码有时有效，有时在Chrome 3中不起作用。
只有第一行在FF 3.51中工作。在使用FireBug进行测试时，我可以看到表达式document.ge
浏览 7提问于2009-07-22得票数 3
回答已采纳
我试图使用hr定位在div中垂直对中。然而，如果我做了top:50%，它就不会显示在中心。为什么会发生这种事？下面是这方面的代码。。margin: 0 auto修复了这个问题，这使我更加困惑，因为这将auto设置为左/右边距，而不是上/下边距。 width: 200px; background: blue;}
width: 200px;
浏览 0提问于2018-01-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
