Question

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

document.body.scrollWidth总是比屏幕宽2px

<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>

Answer 1

我认为问题是浏览器正在添加1个px边框来构建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的宽度有效：P

Answer 2

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

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

Answer 3

将边框宽度设置为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);

Answer 4

如果您确实希望<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>

Answer 5

（水平线）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;
}

Answer 6

使用如下表：

<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

HR宽度100％问题

6 个答案: