-1

I am using HR tag in my HTML page. But the horizontal line is not covering the whole page along X axis. There is a gap at left and right both. How can I fill this gap?

For example, below is a sample code -

<html>
   <hr>
</html>
4

4 回答 4

1

您可以执行以下操作 ->演示

无论如何，你有两个我知道的选项 - 使用水平线或带有顶部或底部边框的 div。

之所以有空格或间隙是因为浏览器带有不同的预设设置 - 所以您需要将边距和填充设置为零。看看演示。

CSS

* {
    margin:0;
    padding:0;
}
hr {
    margin-top: 30px;
    /*so you can see it in demo */
    width: 100%
}
.demo {
    position: relative; /*so I could use 'top: 30px' */
    top: 30px;
    /*so you can see it in demo*/
    width: 100%;
    border-top:1px solid black;
}

HTML

<hr/>
<div class="demo"></div>

编辑：正如Ojdo评论的那样，您可以在使用Meyer's Reset之类的项目之前进行重置，或者您可以使其“跨浏览器”兼容并使用Necolas的normalize.css - 这基本上是为了让您的默认css看起来一致几个浏览器。选择最终取决于您。从头开始或从一些一致的东西开始。

于 2013-06-29T10:07:09.313 回答
0

那是因为身体的边缘。尝试这个：

<html>
    <body style="margin:0;">
    <hr>
    </body>
</html>
于 2013-06-29T10:14:44.453 回答
0

把这个css放在hr上：

hr {
  margin-left: -8px;
  margin-right: -8px;
}

发生这种情况是因为总是有自动保证金

这是一个小提琴示例：

http://jsfiddle.net/ha97t/

于 2013-06-29T10:14:47.720 回答
0

间隙是由body元素的默认边距 8px 引起的（这是常见的浏览器默认值，在 CSS 2.1 和 HTML5 CR 中都有描述）。

您可以简单地覆盖水平边距body：

body { margin-left: 0; margin-right: 0 }

可以使用更广泛的覆盖，例如“CSS 重置”，但它们可能会以多种方式影响您的页面布局，并且不会比简单地覆盖特定属性更好地解决此问题body。

但是，删除这些边距意味着文本将从左边缘到右边缘，通常使字母接触边缘。因此，如果您希望水平线在页面上延伸而不影响任何内容，请在其上设置负边距。然后最好body明确设置边距（以防止浏览器不按照惯例实现它们）：

body { margin: 8px }
hr { margin-left: -8px; margin-right: 8px }
于 2013-06-29T11:03:52.187 回答