HR宽度100%问题

HR width 100% issue

本文关键字：问题 100% 宽度 HR      更新时间：2023-09-26

你能告诉我如何将内容宽度限制在屏幕边界吗？对于下面的脚本，我总是得到比屏幕（允许的空间）宽度宽2px的宽度。

document.body.scrollWidth始终比屏幕宽2倍

<html>
<head>
    <style>
        * {margin: 0; padding: 0}
    </style>
    <script type="text/javascript">
        function test(){
            alert(document.body.scrollWidth);
            alert(document.getElementById("hrtest").scrollWidth);
            alert(document.getElementById("divtest").scrollWidth);
            alert(screen.width);
        }
    </script>
</head>
<body onLoad="test()">
    <div id="divtest">
        <hr size="2" width="100%" id="hrtest" />
    </div>
</body>
</html>

hr {
    border-right : 0;
    border-left: 0;
}

应该这样做。您可能希望为样式添加重要内容，或者遍历文档中的所有hr并设置内联样式。

我认为问题是浏览器添加了一个1像素的边界来构建hr。用chrome检查hr会向我们显示默认应用于所有hr的以下样式：

display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;

禁用border-width: 1px;会得到预期的结果，但会隐藏hr。无论如何，删除hr的宽度有效：p

（水平行）HTML的默认用户代理样式表元素是：

hr {
  display: block;
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 0.5em;
  -webkit-margin-start: auto;
  -webkit-margin-end: auto;
  border-style: inset;
  border-width: 1px;
}

如果您想修复HTML文档的水平滚动，请遵循以下解决方案：

解决方案#1:

hr{
width: 100%;
box-sizing: border-box;
}

解决方案2:

hr{
width: 100%;
border-left: 0px;
border-right: 0px;
}

将边框宽度设置为0将解决此问题。

http://jsfiddle.net/chuckplayer/AuC8b/

* {margin: 0; padding: 0; border: 0}

   <div id="divtest" width="100%">
        <hr size="2" width="100%" id="hrtest" />
    </div>
  alert(document.body.scrollWidth);
            alert(document.getElementById("hrtest").scrollWidth);
            alert(document.getElementById("divtest").scrollWidth);

如果您真的希望<hr>与body的确切宽度匹配，那么我建议隐藏<hr>的边框样式，并使用background-color和height: 1px。您可以在此处查看代码：http://jsfiddle.net/helpinspireme/fg6Mp/3/

CSS

hr{
  border-style: none;
  background: #000;
  height: 1px;}

​jQuery

var body_width = $('body').width();
var div_width = $('div').width();
var hr_width = $('hr').width();
alert(body_width);
alert(div_width);
alert(hr_width);

​HTML

<div>
  <hr/>
</div>​

使用如下表：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
    <!-- your htlm block -->
</td></tr>
<tr><td style="border-bottom: 1px solid black;" height="50">
</td></tr>
</table>

您可以使用行的高度或使用border-top，每次您需要一个小时时将该行添加到您的表中

相关文章：