HTML 中hr标签的模拟方法

最新推荐文章于 2023-08-29 13:52:22 发布

kevinzheng1983

最新推荐文章于 2023-08-29 13:52:22 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web Design 文章标签： html 浏览器 table border function div

本文链接：https://blog.youkuaiyun.com/kevinzheng1983/article/details/659387

Web Design 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了HTML中<hr>标签的多种替代方案，包括使用DIV、SPAN、P和TABLE等元素配合CSS样式来实现水平线效果，特别强调了overflow:hidden属性的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<hr>用来划线即使在HTML4.0里也是被反对的，正确的使用方法应该是用来分隔章节,鉴于各浏览器对<hr>的实现大不相同，所以很难做到全浏览器兼容。而且<hr>相对来说较难控制，因此下面提供几种用其他标签模拟<hr>来划线的方法。

HR:<hr style="border:1px solid lime;height:1px"> DIV:<div style="overflow:hidden;background:red;height:1px;"></div> <br> SPAN:<span style="background:blue;width:345px;height:1px;overflow:hidden"></span><br> P:<p style="background:green;width:345px;height:1px;overflow:hidden"></p> TABLE:<table cellspacing="0" cellpadding="0" style="background:brown;width:345px;height:1px;overflow:hidden"><tr><td></td></tr></table> <script>function runCode(){var code=document.getElementById("code").value; var newwin=window.open('','',''); newwin.document.write(code); newwin.document.close(); } </script>

通过以上代码不难发现，这些css都有一个共同点，那就是overflow:hidden。若不加这个属性，则标签会保留一行字体的高度，而不是1px。